在网页设计中，我们经常会遇到一些需要截断长文本并显示省略号的情况。通过使用CSS，我们可以实现这个效果，让长文本在占用较小的空间的同时，保持美观简洁。本篇博客将介绍如何使用CSS实现多行省略号效果，并提供一些实用技巧。
1. 单行省略号
在CSS中，我们可以使用text-overflow和overflow属性来实现单行省略号效果。例如，我们可以将长文本显示在一个带有固定宽度的容器中，然后使用text-overflow: ellipsis将多余的文本截断，并显示省略号。
.single-line-ellipsis {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏超过容器宽度的文本 */
text-overflow: ellipsis; /* 文本截断显示省略号 */
}
将希望显示省略号的文本包裹在具有.single-line-ellipsis类的容器中：
<div class="single-line-ellipsis">This is a long text that needs to be truncated with an ellipsis.</div>
2. 多行省略号
要实现多行省略号效果，我们需要借助CSS的clamp和网页布局的一些特性。clamp函数允许我们指定文本的最小和最大行高，以及最小和最大字体大小。配置合适的行高和字体大小可以实现多行文本截断并显示省略号的效果。
.multi-line-ellipsis {
display: -webkit-box; /* 设置为弹性盒子布局 */
-webkit-box-orient: vertical; /* 垂直方向排列 */
-webkit-line-clamp: 3; /* 最多显示3行 */
line-height: 1.5; /* 行高，根据需要调整 */
max-height: 4.5em; /* 最多显示3行时的高度 */
overflow: hidden; /* 隐藏多余的文本 */
text-overflow: ellipsis;
}
将希望显示省略号的文本包裹在具有.multi-line-ellipsis类的容器中：
<div class="multi-line-ellipsis">
This is a long text that needs to be truncated with an ellipsis. It can span multiple lines, and the extra lines will be truncated with an ellipsis.
</div>
3. 额外的技巧和注意事项
- 如果需要实现
clamp函数的跨浏览器兼容性，可以使用autoprefixer等工具，自动生成对应的浏览器前缀。 - 对于非Webkit内核的浏览器(如Firefox)，可以使用
display: -moz-box和-moz-box-orient: vertical来替代-webkit-box和-webkit-box-orient。 - 非等宽字体在多行省略号效果中可能会导致出现一些错位问题，你可以在需要截断文本的容器中设置一个固定宽度。
通过使用CSS的多行省略号效果，我们可以更好地控制长文本的显示，使网页更加简洁美观。希望这篇博客对你有所帮助，如果你有任何疑问或建议，请在下方留言，谢谢！
本文来自极简博客，作者：温暖如初，转载请注明原文链接：CSS多行省略号：让文本更加简洁美观
