文字固定显示两行，并且结尾不能出现... 或者半个字体，有什么方法么？

Question

有一个移动端需求，标题最多显示两行文字，但是又不能在最后一行出现... 或者半个字体，css 有什么方法么？刚入行不太懂，求大佬给个方案。

Answer 1

我之前遇到过，二楼那哥们的写法会有..., 思路跟一楼一致，不过要注意行高设置成字体大小，这样能空值overflow的隐藏，防止隐藏的行显示一部分。大致代码就是这些，不合适的自己调调就行了

.box {
   font-size: 15px;
   line-height: 15px;
   height: 30px;
   overflow: heidden;
}

Answer 2

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;(行数)
-webkit-box-orient: vertical;

Answer 3

指定 height，然后 overflow:hidden 就行了