css单行、多行文字溢出省略号
更新时间: 2022-05-05 09:26:00
在工作中，我们总会遇到文本显示不下的问题，通常会采取文本后加省略号的方式。
# 单行文本
使用text-overflow属性
| 值 | 描述 |
|---|---|
| clip | 修剪文本 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本（兼容性有问题） |
# 使用省略号
<div class="test">
我记性是真的很差，从前的事 有很多我都想不起来了。 但是从现在开始，你说的话 ，做过的事，我都会记得 一件也不会忘。你特别好 ，我喜欢你，或者换个说法，心悦你 ，爱你 ，想要你， 随便你怎么样。我想一辈子和你一起夜猎，我还想和你天天，我发誓不是什么一时兴起，也不是像以前那样逗你玩儿，更不是因为感激你。
</div>
1
2
3
2
3
.test {
width:300px;
text-overflow: ellipsis; /* 显示省略号来代表被修剪文本 */
overflow:hidden;
white-space: nowrap;
}
1
2
3
4
5
6
2
3
4
5
6
效果：
我记性是真的很差，从前的事 有很多我都想不起来了。 但是从现在开始，你说的话 ，做过的事，我都会记得 一件也不会忘。你特别好 ，我喜欢你，或者换个说法，心悦你 ，爱你 ，想要你， 随便你怎么样。我想一辈子和你一起夜猎，我还想和你天天，我发誓不是什么一时兴起，也不是像以前那样逗你玩儿，更不是因为感激你。
# 直接修剪文本
<div class="test1">
我记性是真的很差，从前的事 有很多我都想不起来了。 但是从现在开始，你说的话 ，做过的事，我都会记得 一件也不会忘。你特别好 ，我喜欢你，或者换个说法，心悦你 ，爱你 ，想要你， 随便你怎么样。我想一辈子和你一起夜猎，我还想和你天天，我发誓不是什么一时兴起，也不是像以前那样逗你玩儿，更不是因为感激你。
</div>
1
2
3
2
3
.test1 {
width:300px;
text-overflow: clip; /* 直接修剪文本 */
overflow:hidden;
white-space: nowrap;
}
1
2
3
4
5
6
2
3
4
5
6
效果：
我记性是真的很差，从前的事 有很多我都想不起来了。 但是从现在开始，你说的话 ，做过的事，我都会记得 一件也不会忘。你特别好 ，我喜欢你，或者换个说法，心悦你 ，爱你 ，想要你， 随便你怎么样。我想一辈子和你一起夜猎，我还想和你天天，我发誓不是什么一时兴起，也不是像以前那样逗你玩儿，更不是因为感激你。
# 多行文本溢出
多行文本溢出同样可以使用text-overflow，还需要加一个样式，-webkit-line-clamp:2这个数字是可以随便替换的，写2就是两行。
-webkit-line-clamp可以把 块容器 中的内容限制为指定的行数.
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box并且 -webkit-box-orient 属性设置成 vertical时才有效果
在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号.
<div class="test2">
我记性是真的很差，从前的事 有很多我都想不起来了。 但是从现在开始，你说的话 ，做过的事，我都会记得 一件也不会忘。你特别好 ，我喜欢你，或者换个说法，心悦你 ，爱你 ，想要你， 随便你怎么样。我想一辈子和你一起夜猎，我还想和你天天，我发誓不是什么一时兴起，也不是像以前那样逗你玩儿，更不是因为感激你。
</div>
1
2
3
2
3
.test2 {
width:300px;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
overflow:hidden;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
效果：
我记性是真的很差，从前的事 有很多我都想不起来了。 但是从现在开始，你说的话 ，做过的事，我都会记得 一件也不会忘。你特别好 ，我喜欢你，或者换个说法，心悦你 ，爱你 ，想要你， 随便你怎么样。我想一辈子和你一起夜猎，我还想和你天天，我发誓不是什么一时兴起，也不是像以前那样逗你玩儿，更不是因为感激你。