在开发中有时候会遇到文本展示时,内容太多不能全部展示而需要省略的情况,下面是一行和多行的省略方法(其中一种)。
一行文本
.content {
overflow: hidden;
text-overflow: ellipsis; /*以省略号的形式省略内容*/
white-space:nowrap; /*不换行*/
}
实现效果:
多行文本 (此方法只适用于webkit内核的浏览器)
.content {
overflow: hidden;
text-overflow: ellipsis; /*以省略号的形式省略内容*/
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
}