overflow-wrap:break-word 适合长单词和url场景，仅在无法容纳时断词，优先保持单词完整，需配合width/max-width生效；word-break:break-all则到边即断，适用于非语义文本但慎用于中文和移动端。
overflow-wrap:break-word 适合长单词和 URL 场景
当容器里塞着 https://example.com/very/long/path/with/no/spaces 或 supercalifragilisticexpialidocious 这类内容时，overflow-wrap:break-word 是更安全的选择。它只在“实在放不下”的时候才断词，优先保持单词完整，换行点会尽量落在连字符、斜杠或空格后。
常见错误现象：用 word-break:break-all 处理 URL，结果把 https 拆成 ht tp s，影响可读性和复制粘贴；或者让英文段落中正常单词被无意义截断。
- 必须配合明确的
width或max-width才能触发（没有宽度限制，它就当没这回事） - 现代项目请直接写
overflow-wrap:break-word，word-wrap是旧别名，仅用于兼容 IE10–11 - 对中文效果和
word-break:break-all差不多，但英文/数字组合下更克制
word-break:break-all 适合严格控宽 + 非语义文本
word-break:break-all 的逻辑很简单：到边就断，不管是不是单词、有没有语义。它不等“溢出”，只要当前行写满容器宽度，下一个字符就强制换行。
典型场景包括：<td> 里显示 Base64 片段、日志 ID（如 <code>abc123def456ghi789）、窄列表格数据、代码块内联展示（非 <pre class="brush:php;toolbar:false;"></pre>）。
- 它对 CJK 文本（中/日/韩）和拉丁字母一视同仁，中文也会每字一换，可能产生大量短行
- 在移动端长列表中慎用——实测 iOS Safari 渲染 100 个
word-break:break-all元素，重排耗时增加约 8ms - 不要和
white-space:nowrap同时用，否则断行失效（nowrap会压制所有换行行为）
别混用，也别指望它们解决 white-space 问题
overflow-wrap 和 word-break 都不控制空格是否折叠、是否保留换行符。如果你发现文本“明明写了换行却没效果”，大概率是 white-space 没配对。
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
例如：white-space:normal 会合并空格并折行；white-space:pre-wrap 才既保留换行符又允许折行。这两个属性和 overflow-wrap/word-break 是正交关系，必须协同设置。
-
overflow-wrap不影响white-space:nowrap的行为——哪怕内容溢出，也不会换行 -
word-break:keep-all在中文里禁用断行，但若同时设了white-space:pre，换行符仍会生效 - 调试时先确认：容器有宽度？文本真溢出了？
white-space值是否锁死了换行能力？
兼容性与实际落地建议
2026 年绝大多数项目已无需为 IE 兜底，overflow-wrap:break-word 可放心使用。但如果你还在维护老系统，注意：
- IE10–11 只认
word-wrap:break-word，不支持overflow-wrap - Firefox 早期版本对
word-break:keep-all支持不稳定，CJK 文本建议加lang="zh"辅助识别 - 真正难搞的是混合场景：比如一个
<div> 同时含英文术语、中文说明、JSON 片段——这时往往得拆成多个子元素，分别设置策略 <p>最常被忽略的一点：这两个属性都依赖父容器的尺寸约束。没有 <code>width、max-width或弹性布局下的有效收缩，它们根本不会启动。别只盯着属性本身调，先看盒模型是否真的“有边”。
