文本不换行主因是CSS干预，如white-space: nowrap、flex子项未设min-width: 0或overflow-wrap缺失；中文长串需用overflow-wrap: break-word，flex中务必加min-width: 0。
text-wrap: wrap 是默认行为，但需要确保容器不强制 nowrap
HTML 中文本默认就是自动换行的，真正卡住的是某些 CSS 干预——比如 white-space: nowrap、display: inline-block 配合固定宽高没设好、或者父容器用了 flex 且子项没设 flex-wrap: wrap 或 overflow-wrap。检查是否误加了这些限制。
常见误操作包括：
- 给
<p>或<span>加了white-space: nowrap（尤其从复制代码或组件库继承来时） - 用
display: flex包裹文本，但没给子元素设flex: 1或min-width: 0，导致文本不收缩换行 - 容器设置了
width但同时设了overflow: hidden且没配word-break或overflow-wrap
中文长串不换行？优先用 overflow-wrap: break-word
中文没有空格，浏览器默认只在空格/连字符处断行。遇到一长串汉字（如身份证号、base64、URL），需显式启用断行策略。推荐用 overflow-wrap: break-word（旧名 word-wrap: break-word），它会在必要时把超长单词/字符串截断换行。
对比选项：
立即学习“前端免费学习笔记（深入）”；
-
word-break: break-all：强行在任意字符间断，可能把“用户”切成“用”和“户”，阅读体验差 -
word-break: keep-all：中文不断行，等同于默认，对长串无效 -
overflow-wrap: break-word：只在整词放不下时才断，保留语义完整性，更安全
示例：
.text-box {
width: 200px;
overflow-wrap: break-word;
/* 不要加 white-space: nowrap */
}Flex 容器里文本不换行？关键加 min-width: 0
Flex 子项默认有 min-width: auto，会阻止内容收缩，导致文本溢出而非换行。这是最隐蔽也最高频的问题。
修复方式很简单，在文本所在元素上加：
-
min-width: 0（推荐，语义清晰） - 或
overflow: hidden（副作用是隐藏滚动，但也能触发换行）
例如：
<div style="display: flex"> <div style="min-width: 0">这是一段超长超长超长超长的中文文本</div> </div>
不加 min-width: 0，这段文字大概率直接撑开容器或溢出右侧。
table-cell 和 inline 元素换行失效？改 display 或加 break rules
display: table-cell 和 display: inline（含 inline-block）默认忽略 width 和换行控制。如果必须用这类显示模式：
- 对
table-cell：加word-break: break-word+max-width: 0（配合table-layout: fixed更稳） - 对
inline元素：要么改成inline-block并设width和overflow-wrap，要么直接套一层block容器
更干脆的做法：除非真需要表格对齐或内联流式布局，否则别用 table-cell 放纯文本；inline 文本建议外层用 <span> 内嵌 <div> 控制，而不是硬扛样式限制。
最常被忽略的是 flex 场景下的 min-width: 0，很多人调半天 word-break 没用，其实问题根子在 flex 的最小尺寸保护机制上。
