在前端开发中，经常遇到这样的需求：
“文字太长，要截断显示，并在末尾加上省略号。”只需要一行经典 CSS 组合：
css
复制编辑
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
📦完整示例：
html
复制编辑
<div class="ellipsis">这是一段非常非常长的文字，需要被截断显示</div>
css
复制编辑
.ellipsis {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
✅效果：文字溢出时自动显示为「...」。
💡Tips：
- 适用于单行文本；
- 多行省略可用 -webkit-line-clamp（兼容性较差）；
- 不要忘了设置 width，否则不会触发溢出。
https://blog.csdn.net/qqqdqd/article/details/149209167
https://blog.csdn.net/qqqdqd/article/details/149209090
https://blog.csdn.net/qqqdqd/article/details/149208922
https://blog.csdn.net/qqqdqd/article/details/149209254
https://blog.csdn.net/qqqdqd/article/details/149209491
