HTML5文字换行核心靠CSS的white-space、word-break和overflow-wrap组合控制；仅用于语义换行，CSS方案更可控且响应式友好。
HTML5 中文字换行不是靠 <br> 或标签嵌套解决的，核心在 CSS 的 white-space、word-break 和 overflow-wrap（旧名 word-wrap）三个属性的组合控制。用错一个，就可能该断不断、不该断乱断。
强制换行：用 <br> 还是 CSS？
<br> 是语义级换行，只应在内容逻辑需要时使用（如地址、诗行）。它不响应样式、无法被 JavaScript 动态控制，且在响应式布局中容易破坏流式结构。
更可控的做法是用 CSS 强制换行：
-
white-space: pre-line：保留换行符和空格，但合并多余空白，适合带\n的文本（如后端返回的多行描述） -
white-space: pre-wrap：保留所有空白符，同时允许自动折行，适合代码片段或需保留缩进的文本 - 避免用
white-space: pre，它完全禁用折行，长文本会撑破容器
div.code-block {
white-space: pre-wrap;
font-family: monospace;
}
长单词/无空格文本自动换行：为什么 word-break: break-all 不总是对的
遇到 URL、Base64 字符串或连续英文（如 aaaaaaaaaaaaaaaaaaaa），浏览器默认不折行，导致横向溢出。此时常见做法是加 word-break: break-all，但它会粗暴地在任意字符间断开，破坏可读性（如把 https 拆成
ht<br>tps）。
立即学习“前端免费学习笔记（深入）”；
推荐组合：
-
overflow-wrap: break-word（标准属性）或word-wrap: break-word（旧别名）：仅在必要时才在单词内断行，优先保持单词完整 - 配合
word-break: normal（显式重置，防止继承干扰） - 容器必须有明确宽度（如
max-width: 300px），否则无折行触发条件
p.url-text {
max-width: 280px;
overflow-wrap: break-word;
word-break: normal;
}
中文自动换行失效？检查是否误用了 white-space: nowrap
中文默认每个字都是“可断点”，通常无需额外设置就能折行。如果中文不换行，大概率是父元素或自身设置了 white-space: nowrap，或者用了 display: inline-block 且容器太窄导致整行被挤出视口。
排查顺序：
- 用浏览器开发者工具检查元素 computed 样式里的
white-space - 确认没有父级设置了
overflow: hidden+white-space: nowrap的组合 - 中文混排英文/数字时，若出现整段不折，可能是
word-break: keep-all（IE 旧属性残留）或unicode-bidi: bidi-override干扰
Flex/Grid 布局中的换行陷阱
在 display: flex 容器里，子项默认不换行（flex-wrap: nowrap）。即使文本本身支持折行，整个 flex item 也可能因最小宽度限制而撑宽容器。
关键修复点：
- 给 flex item 加
min-width: 0，解除 flex 项默认最小宽度限制（即内容最小宽度） - 再配合
overflow-wrap: break-word和width: 0或flex: 1，才能让内部文字真正响应折行 - Grid 布局同理，
grid-template-columns若设为auto或minmax(min-content, 1fr)，也会抑制折行
.flex-item {
min-width: 0;
overflow-wrap: break-word;
flex: 1;
}
换行问题的本质是渲染引擎如何解析空白符、断点规则与盒模型约束的交集。最易忽略的是继承链上的 white-space 和 flex/grid 的隐式尺寸策略——它们不报错，但会让 CSS 折行规则彻底失效。
