判断文本超过2行 添加展开按钮 如果不超过 则不显示 溢出部分用省略号显示

在H5页面的开发过程中，需要对项目进行测试，但是产品增加了点击展开和点击折叠的要求。在知乎看完，有人有这样的疑问。今天我就来解决问题~

以下是我的解决方案：

利用多行溢出实现“扩展”和“折叠”

多行溢出忽略Css:

飞越：隐藏；文本-overflow:省略号；display :-web kit-box；-web kit-line-clamp : 2；-web kit-box-oriented :垂直；设计是这样的。

点击expand.png。

点击折叠。巴布亚新几内亚

接下来，我将谈谈我的体会

=' review '斯蒂芬妮导师点评：这位同学唱歌基础很扎实，在调音和低音之间切换很自然。整首歌充满感情，非常好听。整首歌充满感情，非常好听。整首歌充满感情，非常好听。/div style . review { padding-top : 2 rem；填充-bottom : 1 rem；左边距： 9雷姆；font-size : 32 rem；color: # b85423线高： 1.5 em；相对位置：}.省略号{溢出：隐藏；文本-overflow:省略号；display :-web kit-box；-web kit-line-clamp : 2；-web kit-box-oriented :垂直；}.展开{ padding-right : 2 rem；绝对位置：bottom : 09 rem；right:0}.展开i{横向： 2266 rem；高度：2266雷姆；display:内联块；垂直对齐：中间；background-image : URL(/cdn _ img/plusswrite . png)；背景-重复：不重复；背景尺寸： 2266雷姆. 72雷姆；}.展开I . plus { background-position : 0；}.spread I . reduce { background-position : 0-0.4933 rem；}/style $('。教师评论)。foreach(函数(v，I){//引入flexible.js进行移动适配//根据flexible获取rem，即window . rem if(v . client height(1.27 * window . rem)){ var El=document。El.innerhtml='.I class=' plus '/我单击展开'；el.className=' spread//因为每个注释都有不同的背景El . style . background color=I % 2==0？# ffca48 ' : ' # ffd358v . append child(El)；//multi是表示溢出$ (v)的符号。addclass('省略号multi ' } })//点击判断是折叠还是展开$('。审阅”)。打开('点击'，'。' multi '，Function(e){ var $ this=$(this)if($ this。hasclass('省略号'){$ this。removeclass('省略号')。查找(' span ')。html(' I class=' reduce '/我点击折叠')；} else {$ this。addclass('省略号')。查找(' span ')。html(“”.I class=' plus '/我单击展开')；}})结果是这样的。

在这里，解释展开和折叠的概念：

展开的情况是由于内容溢出。如果内容没有溢出，就不需要显示“点击按钮展开”。我心烦意乱，突然接到需求，没心情热饭。

灵感在热腾腾的饭菜中闪现，就这样！判断内容的高度，如果大于指定高度，可以解决溢出，显示“点击展开”，不溢出就不显示。

这里的多类是区分内容是否溢出~ ~ ~ ~

如果内容显示溢出，请添加一个椭圆类。一旦点击，就判断有椭圆类表示内容溢出。去掉椭圆类，展开内容是不是很简单？剩下的我就不说了，大家要理解~ ~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。