# 单-多行文本溢出省略
# 遇到问题
文本溢出截断省略，在日常开发中是非常常见的一个业务场景。看似简单，又分为单行截断和多行截断。根据浏览器不同，在 IE 上又存在兼容性问题。所以总结一下常用解决方案。
# 解决方案
# 1. 单行文本溢出省略
- 纯 CSS 方案 核心 css 语句
.ellipsis {
overflow: hidden; // 文字长度超出限定宽度，则隐藏超出的内容
white-space: nowrap; // 设置文字显示在一行，不能换行
text-overflow: ellipsis; // 规定当文本溢出时，显示省略符号来代表被修剪的文本
}
1
2
3
4
5
2
3
4
5
# 优点
- 无兼容问题
- 可以响应式截断
- 限定宽度，文本溢出范围才显示省略号，否则不显示省略号
- 省略号位置显示刚好
# 短板
- 只支持单行文本截断
Demo
<style>
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<body>
<p class="ellipsis" style="width: 100px">这是一段很长很长的文本这是一段很长很长的文本这是一段很长很长的文本</p>
</body>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 拓展
text-overflow：取值clip | ellipsis | string;
text-overflow 属性规定当文本溢出包含元素时发生的事情。默认值clip，不会继承。
- clip：修剪文本。仅隐藏超出的部分。
- ellipsis：显示省略符号来代表被修剪的文本。超出部分隐藏，显示省略号。
- string：用给定的字符串替换被修剪的文本。 // 兼容性不佳
# 2. 多行文本溢出省略（按行数）
- 纯 CSS 方案 核心 CSS 语句
.line-clamp-2 {
display: -webkit-box; // 将元素的盒子模型设置为弹性盒子模型。
-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数，2 表示最多显示2行。需要与其他 Webkit 属性同时使用。
-webkit-box-orient: vertical; // 设置检索弹性盒子的子元素排列方式。需要与其他 Webkit 属性同时使用。
overflow: hidden; // 文字长度超出限定宽度，则隐藏超出的内容
text-overflow: ellipsis; // 多行文本的情况下，用省略号“…”隐藏溢出范围的文本
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 优点
- 可以响应式截断
- 限定宽度，文本溢出范围才显示省略号，否则不显示省略号
- 省略号位置显示刚好
# 短板
- 兼容性一般。移动端页面大都支持。-webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持，IE 不支持。
Demo
<style>
.line-clamp-2 {
line-height: 18px;
max-height: 36px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div class="line-clamp-2" style="width: 100px">这是一段很长很长的文本这是一段很长很长的文本这是一段很长很长的文本</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 拓展
box-flex 是 CSS3 新增加的盒子模型属性，在那个时候，仅Firefox/Chrome/Safari浏览器支持弹性盒子模型，且使用的时候，需要带上私有前缀，诸如-moz-,-webkit-。随着css3标准的更新，名字也在调整。但是多行溢出的时候，flex 不能完全替代（可能私有属性有一些不同的实现吧）。
.flex {
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- ** js 方案 ** js获取字符串长度，计算是否会超出，截取字符串加上省略号
# 优点
- 没有兼容性问题
- 可以响应式截断
- 限定宽度，文本溢出范围才显示省略号，否则不显示省略号
# 短板
- 需要借助 js 实现，用起来相对麻烦
- 针对不同语言时，计算文字宽度可能会有偏差
Demo
const text = '这是一个很长很长很长的文本这是一个很长很长很长的文本这是一个很长很长很长的文本这是一个很长很长很长的文本'
1