一行 CSS 让你的文字永不换行 + 超出显示省略号！

在前端开发中，经常遇到这样的需求：

只需要一行经典 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