多行文字截断方法

在只针对 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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,196评论 4 61
  • WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简...
    五味杂橙阅读 865评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,853评论 18 139
  • 1、什么是时间黑洞?如何避免时间黑洞?时间记录的意义是什么? 时间黑洞,提供很多相关联的信息吸引我们的注意力,使消...
    summerlight阅读 326评论 0 0
  • 生活,活着就像一首诗 但是或者就像一坨屎 你我无法预知前途一切 而却仍然拼命向前 无论最后是优雅的身姿 还是赖皮的...
    呆杲阅读 76评论 0 0