单行文本溢出显示省略号需设置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 的配合，能高效解决大多数文本溢出问题，提升界面整洁度。
