使用overflow、text-overflow和弹性布局等方法可有效防止内容溢出：1. overflow:hidden隐藏溢出或auto添加滚动条；2. 单行文本用white-space:nowrap结合text-overflow:ellipsis显示省略号；3. 多行文本通过-webkit-line-clamp限制行数；4. 配合max-width、word-wrap和flex-shrink防止图片或长单词撑破容器，保持布局稳定。
在HTML和CSS开发中，内容溢出是常见问题，尤其当文本过长或容器尺寸固定时，容易破坏布局。以下是几种实用的防溢出处理方法，帮助你有效控制文本显示与容器边界。
1. 使用 overflow 属性控制溢出
通过设置 overflow 属性，可以控制元素内容超出容器时的表现方式：
- overflow: hidden —— 隐藏溢出部分，内容不可见
- overflow: auto —— 自动添加滚动条（必要时）
- overflow: scroll —— 始终显示滚动条
适用于块级容器，如 div、section 等：
.container {width: 200px;
height: 100px;
overflow: hidden;
}
2. 单行文本截断（省略号显示）
当文本过长需以“...”结尾时，使用以下CSS实现单行截断：
立即学习“前端免费学习笔记（深入）”；
.text-ellipsis {white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
关键点：
- white-space: nowrap 防止换行
- overflow: hidden 隐藏溢出内容
- text-overflow: ellipsis 显示省略号
3. 多行文本截断
CSS 提供了 -webkit-line-clamp 属性来实现多行截断（现代浏览器支持良好）：
.multi-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
限制为最多显示3行，超出部分隐藏并加省略号。
4. 防止布局被撑开的技巧
有时图片或长单词会撑破容器，可通过以下方式避免：
- 设置最大宽度：max-width: 100%
- 控制断词：word-wrap: break-word 或 overflow-wrap: break-word
- 弹性盒子防溢出：flex-shrink: 1 配合 min-width: 0
例如在 flex 布局中防止文字溢出：
.flex-item {flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
基本上就这些。根据实际场景选择合适的方案，既能保持界面整洁，又能提升用户体验。关键是理解 overflow、text-overflow 和容器尺寸之间的关系，合理组合使用即可有效防溢出。
