程序员

多行文字截断方法

2016-03-23  本文已影响628人  IT小C

在只针对 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;
}
上一篇 下一篇

猜你喜欢

热点阅读