通过white-space: nowrap、overflow: hidden和text-overflow: ellipsis可实现单行文本溢出显示省略号，需容器有明确宽度；2. 添加padding可避免文字贴边，提升视觉效果；3. 多行溢出可用-webkit-line-clamp限制行数并加省略号；4. 配合max-width、flex-shrink和word-break等属性防止布局破坏，确保页面稳定美观。
当CSS容器内的文字过长时，容易导致溢出破坏布局。常见表现是文本超出父容器、影响相邻元素排列或导致滚动条异常。解决这类问题，可以结合 text-overflow、white-space、overflow 和适当的 padding 来控制显示效果，保持界面整洁。
1. 基础设置：让文本溢出时显示省略号
要实现单行文本溢出显示省略号（...），需要同时设置以下三个属性：
white-space: nowrap;overflow: hidden;
text-overflow: ellipsis;
这三个属性缺一不可：
- white-space: nowrap 防止文本换行
- overflow: hidden 隐藏溢出内容
- text-overflow: ellipsis 在被截断处添加省略号
注意：容器必须有明确的宽度或最大宽度，否则无法触发溢出。
立即学习“前端免费学习笔记（深入）”；
2. 使用 padding 合理预留空间
有时即使设置了省略号，文字仍可能贴边显示，视觉上不美观。通过添加 padding 可以为文本和容器边缘之间留出安全间距。
例如：
padding: 10px;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
这样既能防止文字顶到边界，又能避免因内边距过大导致可用显示区域太小。
3. 多行文本溢出处理（现代浏览器支持）
对于多行文本，标准的 text-overflow: ellipsis 不起作用，但可以用 -webkit- 扩展实现：
display: -webkit-box;-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
这段代码可以让块级元素限制为最多两行，超出部分隐藏并加省略号。虽然不是所有浏览器都完美支持，但在主流移动端和桌面浏览器中表现良好。
4. 避免布局破坏的实用建议
为了防止文字撑开容器，还需注意：
- 给容器设置 max-width 或使用 flex-shrink: 1 防止伸展过度
- 避免使用 float 布局处理文本容器，优先采用 Flex 或 Grid
- 在响应式设计中，配合 word-break: break-all 或 word-wrap: break-word 控制长单词换行
基本上就这些。合理使用 text-overflow 搭配 padding 和布局约束，就能有效防止文字溢出破坏整体结构，提升页面稳定性与可读性。
