一、应用场景
项目中文字描述过多,但是空间有限,常常需要对溢出文本使用省略号代替。
二、功能实现
1、单行文本
内容只显示一行,超过一行的文本都用省略号代替
div {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
2、多行文本
超过n行才显示省略号,相比单行较为复杂
div {
width: 200px;
word-break: break-all; /* 指定触碰到边界一律换行,哪怕是一个单词 */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;
}
三、注意事项
- 有固定宽度
- 超出盒子外隐藏内容
- 单行省略必须指定不能换行
- 多行的css设置只有-webkit内核才有作用
文章评论