在一些标题、简介等内容时,当内容超过一个范围后就会把内容隐藏并显示省略号。
实现比较简单,直接上代码。
显示单行文本
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
- 使用
overflow: hidden
把超出的内容进行隐藏; - 然后使用
white-space: nowrap
设置内容不换行; - 最后使用
text-overflow: ellipsis
设置超出内容为省略号
固定多行文本
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
-webkit-line-clamp;
用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient;
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。overflow: hidden;
把超出的内容进行隐藏;
多行也可以这样写,比如 less 传个变量写在mixin里面,然后调用
// 多行文字隐藏
.textOverflow(@num) {
-webkit-line-clamp: @num; // 超过行
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
white-space: normal;
}
学到了,感谢感谢!