优先用 overflow-wrap: break-word；它只在单词整体放不下时折行，保留语义完整性，而 word-break: break-all 会强制切分任意字符，仅适用于纯数据展示。
word-wrap / word-break / overflow-wrap 该用哪个
这三个属性经常被混用，但行为差异明显，选错会导致文字截断异常或换行失控。word-wrap 是旧名（CSS3 前），overflow-wrap 是它的标准新名，两者完全等效；word-break 则是另一套逻辑，会强行在任意字符间断行（包括中文、长数字串）。
日常防溢出，优先用 overflow-wrap: break-word：它只在单词整体放不下时才折行，保留语义完整性。而 word-break: break-all 会把“1234567890”切成“123”“456”“789”“0”，多数场景下不自然。
-
overflow-wrap: break-word—— 安全默认，适合英文、中英混排 -
word-break: break-word—— 已废弃，不要用 -
word-break: break-all—— 仅用于纯数据展示（如日志 ID、base64 字符串） -
word-break: keep-all—— 中文不换行，需配合white-space: nowrap才生效，慎用
盒模型尺寸没设死，overflow-wrap 也白搭
很多人加了 overflow-wrap: break-word 还是溢出，根本原因是父容器宽度未约束。比如一个 <div> 没设 <code>width 或 max-width，又没配 flex-shrink，它就会无限撑宽，子元素再怎么折行也无济于事。
常见失效场景：Flex 容器里的文本项、表格单元格、绝对定位元素内部文本。
- Flex 项目要折行，得加
flex-shrink: 1或min-width: 0（触发 flex item 的最小尺寸收缩） - 表格单元格需配
table-layout: fixed+ 显式width，否则overflow-wrap不触发 - 绝对定位元素要限制
width或max-width，不能只靠left/right
white-space 设置冲突会让折行失效
white-space: nowrap 会直接禁用所有换行，包括 overflow-wrap 和 word-break 的效果。这是最常被忽略的隐性覆盖。
将 LaTeX（.tex）学术论文转换为 Word（.docx），支持可编辑的 OMML 公式、原生 Word 表格、嵌入图形、IEEE 双栏排版及参考文献
典型踩坑：组件库全局设了 white-space: nowrap，你局部加 overflow-wrap 却没反应；或者用了 text-overflow: ellipsis 后发现文字既不省略也不折行——因为 ellipsis 要求同时满足 white-space: nowrap + overflow: hidden + width 三者，和折行是互斥需求。
- 要折行，必须确保
white-space是normal、pre-wrap或break-spaces -
white-space: pre-line会合并空白但保留换行符，适合带 Markdown 段落的文本 - 调试时可临时加
outline: 1px solid red看盒模型是否真被限制住
中文长字符串（如无空格 URL）需要额外处理
纯中文本身没有“单词”概念，overflow-wrap: break-word 对连续中文有效；但遇到长英文路径、URL、token（如 https://example.com/a/b/c/very-long-path-with-no-hyphens），浏览器默认不折，因为它是单个“单词”。
这时得靠 word-break: break-all 或更精细的 overflow-wrap: anywhere（现代浏览器支持更好，比 break-word 更激进，会在任意位置断，包括字母之间）。
-
overflow-wrap: anywhere—— 推荐替代break-all，语义更清晰，且不会像break-all那样对中文也乱切 - 若需兼容 IE，只能用
word-break: break-all，并注意测试中文段落是否被误切 - 对 URL 类内容，可结合
hyphens: auto（需语言属性lang="en"）辅助软连字符，但支持度有限
真正难搞的是混合型长字符串：中英文+数字+符号无分隔，这时候光靠 CSS 不够，得前端预处理插入零宽空格 或使用 text-wrap: balance（实验性，暂勿生产用）。实际项目里，这类字段最好从接口层就做截断或格式化，别全压给 CSS。
