【css】css超出两行省略号

css超出两行省略号

如果div没设置高度

https://www.cnblogs.com/xiaosuibu/p/8196067.html

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

如果div设置了高度

如果div设置了高度，那么想只显示两行的话，就需要把div的高度和两行文字的高度一样，否则还是会显示第三行的。

less实现方式

自动计算当前文本高度

/* 文字省略号(显示几行，每行高度) */
.text-ellipsis(@lineCount, @lineHeight) {
  // 控制行高
  line-height: @lineHeight;
  height: calc(@lineHeight * @lineCount);

  //  控制显示
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @lineCount;
  line-clamp: @lineCount;
  -webkit-box-orient: vertical;
  // 控制显示2
  // text-overflow: ellipsis;
  // -webkit-box-orient: vertical;
  // display: block;
  // display: -webkit-box;
  // -webkit-line-clamp: @lineCount;
}