overflow-wrap用于防止长文本溢出容器，推荐设置为break-word以实现单词内断行。配合white-space可精确控制换行行为，如normal与pre-wrap组合适用于不同场景。在响应式设计中，应对用户输入内容的容器统一设置overflow-wrap: break-word，并结合max-width和word-wrap兼容写法，提升布局稳定性与可读性。
在响应式布局中，长文本容易破坏页面结构，尤其是在小屏幕设备上。为了防止文本溢出容器，CSS 提供了 word-wrap 和 overflow-wrap 属性来控制文本的换行行为。虽然这两个属性名称不同，但它们的作用基本一致，现代开发中推荐使用 overflow-wrap。
理解 overflow-wrap 与 word-wrap
overflow-wrap 是 CSS3 中的标准属性，用于指定是否在单词内部进行换行以防止溢出。它的前身是 word-wrap，属于旧语法，但大多数浏览器仍支持。
常用取值包括：
- normal：只在允许的断点处换行（如空格、连字符），长单词可能溢出
- break-word：允许在单词内断开，避免溢出容器
示例：
立即学习“前端免费学习笔记（深入）”；
.text-container {
width: 200px;
border: 1px solid #ccc;
overflow-wrap: break-word; /* 推荐写法 */
}
/* 或兼容旧浏览器 */
.text-container {
word-wrap: break-word; /* 实际效果与 overflow-wrap 相同 */
}
结合 white-space 控制换行策略
单独使用 overflow-wrap 可能不够灵活，常需配合 white-space 使用，以精确控制空白符和换行行为。
常见组合：
- white-space: normal + overflow-wrap: break-word：正常处理空格和换行，长词自动断行 —— 最常用场景
- white-space: pre-wrap：保留原始换行和空格，同时支持长词断行，适合显示代码或日志类文本
示例：
立即学习“前端免费学习笔记（深入）”；
.code-block {
white-space: pre-wrap;
overflow-wrap: break-word;
background: #f4f4f4;
padding: 10px;
}
响应式设计中的实际应用建议
在移动端优先的布局中，文本容器宽度变化大，更需主动预防溢出问题。
- 对所有可能包含用户输入的容器（如评论、昵称、文章摘要）统一设置 overflow-wrap: break-word
- 避免使用 table-layout: fixed 时忽略文本换行，应在表格单元格中显式启用断行
- 配合 max-width: 100% 和 word-break: break-all（谨慎使用）处理极端情况
完整推荐样式：
.responsive-text {
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word; /* 兼容性兜底 */
hyphens: auto; /* 可选：支持断字连字符 */
}
基本上就这些。合理使用 overflow-wrap 能有效提升响应式文本的可读性和布局稳定性，尤其在内容不可控的场景下尤为重要。不复杂但容易忽略。
