单行多行文本溢出隐藏(面试题)
- 单行文本溢出
<div class="box">
大大大大大大大大笑笑笑笑笑笑笑笑哈哈哈哈哈哈
</div>
.box{
width: 225px; // 设置宽度
overflow:hidden; // 设置超出隐藏
text-overflow: ellipsis; //设置溢出的标识是省略号
white-space: nowrap; // 强制不换行
}
- 多行文本溢出省略代码
<div class="box">
大大大大大大大大笑笑笑笑笑笑笑笑哈哈哈哈哈哈啦啦啦啦啦啦啦啦斑斑驳驳八八八八八八八
</div>
.box{
width: 225px;
overflow:hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-line-clamp:2; // 显示的行数
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
}
由于上面的三个属性都是 CSS3 的属性,没有浏览器可以兼容
要在前面加一个-webkit- 来兼容一部分浏览器.