单行文本溢出需设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，并限定宽度；多行则使用-webkit-box、-webkit-line-clamp和-webkit-box-orient实现，适用于现代浏览器。
当文本内容超出容器宽度时，使用CSS实现溢出部分显示为省略号（...）是一种常见需求。这在标题、列表项或卡片组件中尤为实用。要正确实现这一效果，需要结合多个CSS属性协同工作。
单行文本溢出省略
适用于只允许显示一行的文本，超出部分以“...”表示。
关键属性：- white-space: nowrap：强制文本不换行
- overflow: hidden：隐藏溢出内容
- text-overflow: ellipsis：溢出时显示省略号
示例代码：
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* 必须限定宽度 */
}
多行文本溢出省略
当希望限制文本显示为两行或三行时，标准的 text-overflow 不再适用，需借助 WebKit 特性。
立即学习“前端免费学习笔记（深入）”；
适用场景：
- 文章摘要
- 商品描述
- 用户评论预览
示例代码（支持2行省略）：
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 2; /* 控制行数 */
-webkit-box-orient: vertical;
overflow: hidden;
width: 200px;
}
注意：-webkit-line-clamp 兼容性较好，但非标准属性，建议用于现代浏览器环境。兼容性与注意事项
确保省略效果正常显示，需注意以下几点：
- 必须设置固定宽度或最大宽度（width 或 max-width）
- 块级元素更易控制，内联元素建议转为 inline-block 或 block
- 父容器不要设置过小的 height，避免遮挡文本
- ellipsis 只在英文和数字间有效，中文同样支持
基本上就这些，掌握这几个属性组合，就能应对大多数文本截断场景。
