如何使用 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 以 “…” 结尾处理溢出文本？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1556255.html
微信扫一扫 
支付宝扫一扫 
