如何使用 css 处理溢出内容并以 "..." 结尾
在设计网页时，可能会遇到文本或其他元素超出指定区域的情况。为了美观和可用性，我们希望以清晰的方式处理溢出内容。本文将探讨使用 CSS 解决方案处理此问题，具体重点是如何使用 "..." 作为结尾。
问题描述
我们有一个容器包含大量文本："TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST"。
现状：内容超出了容器，导致混乱和不可读。
立即学习“前端免费学习笔记（深入）”；
预期效果：内容应截断，并在结尾处显示省略号 "..."。
解决方案
1. 当行省略号
.content {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}此解决方案适用于希望在文本溢出时在同一行显示省略号的情况。通过将 "overflow" 设置为 "hidden"，文本将被截断在容器内。 "white-space:nowrap" 可防止文本换行，而 "text-overflow:ellipsis" 用于添加省略号。
2. 多行省略号
.content {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;/*设置超过为省略号的行数*/
overflow:hidden;
text-overflow:ellipsis;
}此解决方案适用于希望在文本溢出时在多行显示省略号的情况。 "display:-webkit-box" 将容器设为块状容器， "-webkit-box-orient:vertical" 使其垂直排列， "-webkit-line-clamp" 用于指定要在省略号之前显示的行数。
以上就是如何使用 CSS 以 "..." 结尾处理溢出文本？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
832
