在只針對 PC 端開發(fā)的年代,可以通過后端控制輸出文字的長度來實現(xiàn)固定行數(shù)的效果金闽。
但在響應(yīng)式頁面纯露,這可能不再適用,只能輸出足夠多的文字代芜,然后通過前端截取需要的行數(shù)埠褪。
Webkit 內(nèi)核的瀏覽器可以通過 -webkit-line-clamp 私有屬性實現(xiàn)多行文字截取。其他瀏覽器沒有這個屬性挤庇,我的做法通常是把容器的高度限定為 行高 * 顯示的行數(shù)钞速,超出的部分隱藏,勉強達到目的嫡秕。
.line-clamp {
overflow:hidden;
text-overflow:ellipsis;
display:0;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
對于其他內(nèi)核的瀏覽器渴语,就是限制高度
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;
}