首选 overflow-wrap: break-word，但必须配合明确宽度（如 max-w-full）且不能与 white-space: nowrap 共存，否则不生效；它仅在内容超出容器时被动断词，不主动换行。
直接结论：用 overflow-wrap: break-word，但必须配合明确宽度（如 max-w-full 或 w-64）和非 white-space: nowrap 的上下文，否则它完全不生效。
为什么 overflow-wrap: break-word 加了却没反应
这不是属性写错，而是它根本没被触发——overflow-wrap: break-word 只在「内容实际超出容器可用宽度」时才介入断行，否则静默忽略。常见失效原因包括：
- 容器没设宽度（比如只写
overflow-wrap: break-word，没配max-w-md或w-full） - 元素是
span这类inline元素，需额外加block或inline-block - 祖先元素用了
white-space: nowrap，直接锁死所有换行机会 - 文本被包在
、或设置了white-space: pre的容器里
overflow-wrap: break-word vs word-break: break-all
二者语义和结果差异极大，混用会破坏可读性：
-
overflow-wrap: break-word：只在必要时断开长单词，优先保 URL、路径、文件名语义完整。例如https://api.example.com/v1/users可能在/后断，但v1和users不会被拆 -
word-break: break-all：无视语义，在任意字符间切断。适合 UUID、base64 等无需阅读的字段，但会让filename.pdf变成filena-me.pdf，复制粘贴失效 - 中英文混排时，
word-break: break-all可能在汉字中间硬切（如“处理”变“处-理”），而overflow-wrap: break-word会避开中文字符内部
Flex/Grid 子项里的长文本死活不换行
这不是 overflow-wrap 失效，而是布局层锁死了换行机会——Flex/Grid 子项默认拒绝收缩，哪怕内容撑爆也不折行：
- Flex 子项必须加
min-w-0（或min-w-[0px]），否则flex-shrink被忽略，宽度强行撑满 - Grid 子项同理，
min-w-0是前提，否则浏览器优先分配列宽而非折行 - 错误写法：
flex flex-row overflow-wrap: break-word；正确写法：flex flex-row min-w-0 overflow-wrap: break-word -
overflow-wrap本身不定义宽度，它只是“守门员”，只在已有边界内工作。一旦容器宽度靠 JS 动态计算或 CSS Grid 自动分配，就得手动塞max-w-full
URL 和带连字符的文本怎么自然断在 /、-、_ 后面
overflow-wrap: break-word 默认对斜杠、连字符不敏感，浏览器不视其为天然断点。要让它真正在这些位置停，得补一层逻辑：
- 加
overflow-wrap: anywhere（Tailwind v3.3+ 内置）：允许在空格、/、-、_后断行，比break-word更激进但比break-all有节制 - 加
hyphens: auto：对支持的字体，在连字符处自动加软连字符（），注意 Safari 兼容性较弱 - 稳妥组合：
max-w-full overflow-wrap: break-word overflow-wrap: anywhere
最常被忽略的是：你写的那个 break-word，从来不是“主动出击”的规则，它只在宽度已定、内容已溢出的前提下，才悄悄帮你切一刀。没宽度，它就当没看见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
