前端布局相关技巧
2019-11-06 本文已影响0人
夜消雨霁
多行文本溢出省略（按行数）
○ 纯 CSS 实现方案
核心 CSS 语句
-webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的 WebKit 属性）
display: -webkit-box；（和1结合使用，将对象作为弹性伸缩盒子模型显示 ）
-webkit-box-orient: vertical；（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
overflow: hidden；（文本溢出限定的宽度就隐藏内容）
text-overflow: ellipsis；（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)
优点
响应式截断
文本溢出范围才显示省略号，否则不显示省略号
省略号显示位置刚好
短板
兼容性一般： -webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持（但估计可以 line-clamp 兼容其它内核浏览器）
适用场景
多适用于移动端页面，因为移动设备浏览器更多是基于 WebKit 内核
Demo
<style>
.demo {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
