1.单行省略号
<div class="one">
哈哈哈哈哈哈哈哈哈哈或或或哈或或哈或哈哈或或哈或哈奥或哈哈哈或哈哈
</div>
.one{
height: 80px;
width: 150px;
background-color: pink;
/* white-space: normal; */
white-space: nowrap;
/* 强制一行内显示,不允许换行 */
overflow: hidden;
/* 溢出部分隐藏 */
text-overflow: ellipsis;
/* 文字溢出用省略号显示 */
}
多行省略
<div class="text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
.text{
height: 65px;
width: 150px;
background-color:yellowgreen;
overflow: hidden;
/* 溢出部分隐藏 */
text-overflow: ellipsis;
/* 文字溢出用省略号显示 */
display: -webkit-box;
/* 弹性伸缩盒子模型 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
/* 兼容性不好,IE不支持 */