# 文字超出末尾显示省略号
# 快速导航
# 单行文字
宽度-width:
内容溢出-overflow:
文本溢出-text-overflow:
段落文本换行-white-space:
实现代码如下
.single-ellpsis-wrap {
width: 500px; // 注意宽度是必须的
overflow: hidden; // 超出部分隐藏
text-overflow: ellipsis; // 超出部分,用...省略号代替
white-space: nowrap; // 不换行
}
1
2
3
4
5
6
2
3
4
5
6
# 多行文字
宽度:
显示行数:
实现代码如下
.multi-ellpsis-wrap {
display: -webkit-box; // 声明弹性盒模型,浏览器前缀必须加上,火狐-moz/IE-moz/chrome-webkit
-webkit-box-orient: vertical; // 垂直方向
-webkit-line-clamp: 3; //需要显示的行数
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 内容超出部分,省略号显示
}
1
2
3
4
5
6
7
2
3
4
5
6
7
提示
当声明display:box
,时,必须要加上浏览器前缀-webkit-box
,否则就不会生效.
# 相关文档
- MDN-overflow 详解 (opens new window)
- MDN-text-overflow 详解 (opens new window)
- MDN-white-space 详解 (opens new window)
- w3cshool-box-orient (opens new window)
← 实现扇形生成器 实现小于12px的字体像素 →