在只针对 PC 端开发的年代,可以通过后端控制输出文字的长度来实现固定行数的效果。
但在响应式页面,这可能不再适用,只能输出足够多的文字,然后通过前端截取需要的行数。
Webkit 内核的浏览器可以通过 -webkit-line-clamp 私有属性实现多行文字截取。其他浏览器没有这个属性,我的做法通常是把容器的高度限定为 行高 * 显示的行数,超出的部分隐藏,勉强达到目的。
.line-clamp {
overflow:hidden;
text-overflow:ellipsis;
display:0;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
对于其他内核的浏览器,就是限制高度
line-clamp(@lines,@line-height: 1.3em) {
text-overflow:ellipsis;
display:0;
-webkit-box-orient:vertical;
-webkit-line-clamp:@lines;
overflow:hidden;
line-height:@line-height;
max-height:@line-height * @lines;
}