网页展示中，文本截断展示成省略号（...）的效果时常会被用到。CSS 中，文本的截断效果设置区分单行和多行，各自实现方式是不同的，下面就来学习。
实现单行文本截断效果
最终代码：
.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
解释：
-
文本省略的前提是「文本不能折行」，因此就要设置 white-space: nowrap。 -
背景：是否折行的行为由 white-space属性控制。其默认值是normal，也就是会自动折行，这是符合直觉的。 -
文本省略的前提是「文本不能溢出」到容器范围之外，因此就要设置 overflow: hidden。 -
背景：文本不折行的情况下，如果容器宽度不够，默认会表现为溢出。这一行为可以通过设置 overflow属性控制，其默认值是visible，表现为溢出容器之外。 -
文本一旦不能换行、不能溢出，就可以为其「设置文本截取效果」，因为需要表现为文末是三个点“…”的省略效果，所以就要设置 text-overflow: ellipsis -
背景： text-overflow用来控制文本截取效果。有两种可能取值：clip（默认值） 和ellipsis。因为默认取值clip就表现为“截断”效果，这就是在设置完overflow: hidden后看到的初始效果了。
实现多行文本截断效果
最终代码：
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
/* 固定搭配 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
这里实现了一个最多显示 3 行就截断文本的省略效果。
解释：
-
与单行文本相比，首先要「移除 white-space: nowrap」 规则，多行展示 -
「增加 3 个固定 -webkit-前缀属性」。目前这块方案还没标准化。 -
提供多行截断环境支持： display: -webkit-box或display: -webkit-inline-box -
指定多行截断方向： -webkit-box-orient: vertical– 目前也仅支持垂直方向 -
指定截断的行数阈值： -webkit-line-clamp: 3– 表示文本最多显示 3 行就截断
原文始发于微信公众号（写代码的宝哥）：如何使用 CSS 实现单行、多行的文本截断省略效果？
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/244006.html
