CSS文字溢出省略技巧全解析

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS文字溢出省略技巧与应用》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

单行文本溢出显示省略号需设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，并确保容器有固定宽度；多行省略则使用display: -webkit-box、-webkit-line-clamp和-webkit-box-orient: vertical，配合overflow: hidden实现，但需注意浏览器兼容性。

当文本内容过长，超出容器宽度时，我们通常希望用省略号（...）来表示溢出部分。这在列表标题、卡片描述等场景中非常常见。实现这一效果主要依赖 text-overflow、white-space 和 overflow 三个CSS属性的配合使用。

单行文字溢出显示省略号

这是最基础也是最常见的需求。要让一行文本在超出容器时显示省略号，需同时设置以下三个属性：

• white-space: nowrap：防止文本换行，强制在同一行显示。
• overflow: hidden：隐藏超出容器的内容。
• text-overflow: ellipsis：当文本溢出时显示省略号。

示例代码：

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 必须有固定宽度 */
}

注意：容器必须有明确的宽度或最大宽度，否则无法触发溢出判断。

多行文字溢出显示省略号

CSS原生的 text-overflow: ellipsis 只支持单行。若要实现多行省略（如两行或三行后加省略号），需要借助 WebKit 特有属性 -webkit-line-clamp。

关键属性组合：

• display: -webkit-box：将元素设为弹性盒子（WebKit私有）。
• -webkit-line-clamp：限制显示的行数。
• -webkit-box-orient: vertical：设置子元素垂直排列（用于文本时可实现行截断）。
• overflow: hidden：配合截断使用。

示例：实现最多显示两行文本

.description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 200px;
}

⚠️ 注意：该方法在非 WebKit 内核浏览器（如 Firefox）中可能不完全支持，生产环境中建议测试兼容性或使用 JavaScript 回退方案。

white-space 属性的作用详解

white-space 决定元素如何处理空白符（空格、换行、制表符）。常用值包括：

• normal：合并空白符，自动换行（默认行为）。
• nowrap：合并空白符，不换行——常用于单行省略。
• pre：保留空白符，不自动换行（类似 pre 标签）。
• pre-wrap：保留空白符，允许换行。
• pre-line：合并多余空白符，但保留换行符并换行。

在文字省略场景中，nowrap 是关键，它阻止文本自然换行，从而触发单行溢出逻辑。

实际项目中的注意事项

在真实开发中，容易忽略以下几点：

• 容器必须有确定的宽度或最大宽度，百分比也可以，但不能是自适应无限宽。
• 避免在 inline 元素上直接使用，最好应用于 block 或 inline-block 元素。
• 多行省略仅在现代浏览器中稳定支持，老项目需考虑降级处理。
• 如果内容包含图标或内联元素，需注意布局影响。

基本上就这些。掌握 text-overflow 与 white-space 的配合，能高效解决大多数文本溢出问题，提升界面整洁度。

到这里，我们也就讲完了《CSS文字溢出省略技巧全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,文字溢出的知识点！