单行文本溢出需设置white-space: nowrap、overflow: hidden、text-overflow: ellipsis实现省略号；多行使用-webkit-box、-webkit-line-clamp和-webkit-box-orient: vertical，配合overflow: hidden截断；容器必须限定宽度，避免flex-grow: 1导致撑开，推荐结合title属性显示完整内容，注意浏览器兼容性及降级处理。
文本超出容器导致显示混乱是常见的布局问题，尤其在内容长度不可控时。使用 text-overflow 配合其他 CSS 属性，可以优雅地处理溢出并用省略号表示被截断的文本。
1. 单行文本溢出省略
适用于标题、标签等单行内容，当文字过长时自动截断并显示“...”。
需要同时设置以下属性：- white-space: nowrap：禁止换行
- overflow: hidden：隐藏溢出部分
- text-overflow: ellipsis：溢出时显示省略号
示例代码：
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2. 多行文本溢出省略
对于需要展示多行描述的场景（如文章摘要），可通过 -webkit- 扩展实现省略。
立即学习“前端免费学习笔记（深入）”；
- display: -webkit-box：启用弹性盒子模型（WebKit 内核）
- -webkit-line-clamp：限制行数
- -webkit-box-orient: vertical：设置子元素垂直排列
- overflow: hidden：配合截断生效
示例代码：
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
注意：此方法在非 WebKit 浏览器中兼容性有限，建议用于移动端或已知环境支持的情况。3. 确保容器有明确宽度
text-overflow 生效的前提是容器不能无限扩展。如果父容器宽度未限定，文本仍会撑开布局。
- 设置 width 或 max-width
- 避免使用 flex-grow: 1 导致无限拉伸
- 在弹性布局中可结合 min-width: 0 防止溢出
4. 实际应用建议
在开发中推荐：
- 单行优先使用标准 text-overflow 方案
- 多行考虑浏览器兼容性，必要时用 JS 截取字符长度作为降级处理
- 配合 title 属性，鼠标悬停显示完整文本
例如：
<div class="single-line" title="这是一段很长的文字"> 这是一段很长的文字 </div>
基本上就这些，合理组合 CSS 属性就能解决大多数文本溢出混乱的问题。不复杂但容易忽略细节。
