单行文本溢出省略需设置overflow: hidden、white-space: nowrap和text-overflow: ellipsis，并限定宽度；多行则用display: -webkit-box、-webkit-line-clamp和-webkit-box-orient: vertical，同样需隐藏溢出，适用于WebKit浏览器，注意兼容性及容器宽度限制。
当文本内容超出容器宽度时，可以通过 CSS 设置显示省略号（...）来优雅地处理溢出。实现这一效果需要结合多个 CSS 属性，确保文本在单行或多行情况下都能正确截断并显示省略号。
单行文本溢出省略号
适用于只显示一行文本，超出部分用省略号表示。
关键属性：- overflow: hidden：隐藏溢出内容
- white-space: nowrap：禁止文本换行
- text-overflow: ellipsis：溢出时显示省略号
示例代码：
.single-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px; /* 必须有固定或最大宽度 */
border: 1px solid #ccc;
}
多行文本溢出省略号
用于限制文本显示为两行或更多行，超出后自动加省略号。
立即学习“前端免费学习笔记（深入）”；
常用方法（基于 WebKit 内核浏览器）：
- display: -webkit-box：启用弹性盒子模型
- -webkit-line-clamp：限制行数
- -webkit-box-orient: vertical：设置子元素垂直排列
- 同样需要 overflow: hidden
示例代码（两行省略）：
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 200px;
border: 1px solid #ddd;
}
注意：该方式在非 WebKit 浏览器中可能不完全支持，需测试兼容性或使用 JavaScript 替代方案。
注意事项和常见问题
确保省略号正常显示，需要注意以下几点：
- 容器必须有明确的宽度或最大宽度（如 width、max-width），否则无法判断何时溢出
- 块级元素更可靠，行内元素建议改为 inline-block 或 block
- 避免在父元素上使用
word-break: break-all等影响布局的属性 - 多行省略仅在支持 -webkit-line-clamp 的浏览器中生效
基本上就这些。根据实际需求选择单行或多行方案，合理设置宽高和溢出控制，就能实现清晰美观的文本截断效果。
