在前端开发中，控制文本的显示范围是常见需求。CSS提供了overflow与text-overflow两个属性来处理元素内容溢出时的表现，尤其是当我们需要将过长的单行或多行文本裁剪并显示省略号时，这两个属性缺一不可。
一、overflow属性的作用
overflow用于规定当元素内容超出其指定尺寸时如何处理。常用值包括visible、hidden、scroll和auto。在文本裁剪场景中，通常使用hidden来隐藏溢出部分。
- visible：内容不被裁剪，会溢出显示
- hidden：溢出内容被隐藏，不显示滚动条
- scroll：始终显示滚动条
- auto：内容溢出时才出现滚动条
二、text-overflow属性解析
text-overflow决定被隐藏的溢出文本如何提示用户。它仅在overflow设置为hidden、scroll或auto，且文本发生溢出时生效。主要值有：
- clip：直接裁剪，无省略号
- ellipsis：显示省略号
单行文本裁剪示例
实现单行省略号必须同时设置white-space:nowrap防止换行，以及overflow:hidden。
.single-line {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本裁剪思路
标准text-overflow仅支持单行。多行裁剪可使用-webkit-line-clamp配合display:-webkit-box实现，但注意兼容局限。
.multi-line {
width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
三、常见错误与注意点
很多初学者发现text-overflow:ellipsis无效，原因往往是忘记设置overflow:hidden或white-space:nowrap。此外，在表格单元格中使用时需设置table-layout并限制宽度。
| 场景 | 必要属性 |
|---|---|
| 单行省略 | overflow:hidden, white-space:nowrap, text-overflow:ellipsis |
| 多行省略 | display:-webkit-box, -webkit-line-clamp, overflow:hidden |
四、总结
通过合理组合overflow与text-overflow，我们可以优雅地管理文本溢出。在编码时，应先确认容器宽度与溢出隐藏，再选用合适的裁剪方式，从而避免布局混乱并改善阅读体验。
CSStext-overflowoverflow修改时间：2026-07-28 10:21:09