Html常见小问题及解决方法（多行文本省略）

我们在进行网页布局的时候很多时候都会用到多行文本省略号，不知道你们有没有遇到过这样的情况，需要排某一段文字，让它在第三行或者第某某行出现省略号，后面的文字隐藏掉，当设好一个盒子之后，给其在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的结果也是一样的。

本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人