使用text-overflow:ellipsis只能设置某一行文字的超出省略,display: -webkit-box则可以设置超出指定行数后省略。下面的例子中设置的是文字超出两行进行省略
div{
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow: hidden;
}
<div>
这是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文
是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文
</div>
效果
缺点是不兼容IE: