1.单行文本
.className{
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2.多行文本
.className{
display: -webkit-box;
webkit-box-orient: vertical;
webkit-line-clamp:3
//文本的行数
overflow: hidden;
}
其中多行文本中,因为我们使用了webkit的扩展属性,该方法适用于内核为webkit的浏览器;
注意:
-webkit-line-clamp是用来限制一个块元素显示的文本行数。为了实现对应的效果,它需要结合其他的webkit属性。
常见的有:
(1)display: -webkit-box;这个属性是必须的,将元素作为弹性伸缩盒子模型显示
(2)-webkit-box-orient;这个属性也是必须的,设置或检索伸缩盒子对象的子元素的排列方式