我们在进行网页布局的时候很多时候都会用到多行文本省略号，不知道你们有没有遇到过这样的情况，需要排某一段文字，让它在第三行或者第某某行出现省略号，后面的文字隐藏掉，当设好一个盒子之后，给其在css样式中写上多行文本省略好的代码，发现好像出了点问题
8.jpg
.one {
width: 300px;
height: 100px;
background: rgb(220, 255, 180);
-webkit-line-clamp:2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
省略号是出现了，设置的是在第二行，但下面的字却没隐藏，代码也没错呀，那么问题来了，哪里出错了呢？
仔细看一下盒子的高度，问题就出现在这个高度之上，当你把盒子的宽定死之后，除非你设置的宽度刚好只够显示两行字，一点都不能多（这是错误的做法），这样会凑巧显示正确，不然后面的字体就会溢出。
解决的方法也很简单
不设高度或把高度设为自动适应auto；如下图
.one {
width: 300px;
/* height: 100px; */
background: rgb(220, 255, 180);
-webkit-line-clamp:2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
结果就是正常的，文字也没有溢出
11.jpg
把宽设成auto的结果也是一样的。
本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人
