word-break单独加在上大概率没用，必须同时设置white-space: normal、容器有明确宽度（如width/max-width），并配合overflow-wrap: break-word或word-break: break-all才能生效。
word-break 单独加在 <td> 上大概率没用——它只是定义“在哪能断”，不是“要不要断”。真正起作用的是三件事：容器有明确宽度、<code>white-space 允许换行、overflow-wrap 或 word-break 提供断点策略。
为什么 word-break: break-all 加了还是不换行？
常见失效不是属性写错，而是它根本没触发条件：
-
white-space: nowrap会彻底屏蔽所有自动换行，哪怕其他样式全对也白搭 <table> 或 <code><td> 没设 <code>width/max-width，浏览器就不知道“边界在哪”，overflow-wrap就不会生效- 用了
table-layout: fixed却没给<td> 设 <code>width，表格列宽被锁死，内容只能横向拉伸 - 在
display: flex或display: grid的子项里，min-width: auto默认阻止收缩，必须显式加min-width: 0 -
white-space: normal：让空格、\n、连字符（-）这些默认断点生效（这是基础） -
overflow-wrap: break-word：现代标准，优先在正常断点换行；仅当内容撑出容器时，才断开长单词或 URL -
word-break: break-all：无条件允许任意字符间断行，适合展示哈希值、日志片段等无需语义的场景；但中文会被切成单字（如“你好世界”→“你好世 界”），慎用 -
word-break: keep-all：中文不断字，英文也不拆词，纯靠空格分隔；遇到无空格长串（如https://example.com/verylongpath）照样溢出 - 用
white-space: pre-wrap：完全保留空格和换行符，适合代码块、日志等需精确格式的场景 - 别用
<br>手动替换——破坏语义、难维护、XSS 风险高 - 想插入“可选断点”？用
<wbr></wbr>，它是软连字符，由浏览器决定是否真断，比硬塞更自然
word-break 和 overflow-wrap 到底怎么配？
它们不是替代关系，是分工协作：
后端返回带 \n 的文本怎么还原换行？
浏览器默认把 <td> 里的换行符当空格处理。要还原原始换行，必须用语义安全的方式：
<ul>
<li>用 <code>white-space: pre-line：保留 \n，但把多个连续空格合并为一个，末尾换行不生成空行
最常被忽略的一点：换行不是 CSS “开关一开就自动发生”，它依赖布局上下文。没有宽度约束、没有正确的 white-space、没考虑 Flex/Grid 的 min-width 行为，再漂亮的属性组合也无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
