word-break: break-all能强制超长字符串任意断行，适用于日志、API路径等场景，但会破坏单词可读性；应优先用overflow-wrap: break-word实现智能换行。
长单词不换行，用word-break: break-all最直接
网页里遇到超长英文或数字串（比如https://example.com/very-long-path-with-no-hyphens-1234567890），默认会撑破容器。这时候word-break: break-all能强制在任意字符间断行，不用等空格或连字符。
它适合后台日志、API路径、哈希值这类纯内容展示场景，但副作用明显：可能把有意义的单词（如username）切成usern和ame，影响可读性。
- 只对块级元素生效，需确保父容器有明确宽度（比如
max-width: 300px） - 不触发浏览器自动连字符（hyphenation），和
hyphens属性互斥 - IE10+ 和所有现代浏览器都支持，但 Safari 旧版本对
break-all在table-cell中行为不一致
word-break: break-word已废弃，别再用了
这个值在 Chrome 早期版本里存在，但早被移除。现在写word-break: break-word实际会被忽略，等价于normal——也就是完全不换行。很多老项目还留着这行 CSS，结果就是“明明写了却没效果”。
真正想实现“优先靠空格换行，不得已才劈开长词”，该用overflow-wrap: break-word（旧名word-wrap: break-word）。
立即学习“前端免费学习笔记（深入）”；
SEO关键词密度优化与页面审计技能。使用场景：①提供页面路径与关键词进行SEO优化；②提升页面关键词密度；③提升搜索引擎排名；④进行SEO审计（meta标签、OG、hreflang等）。触发词：关键词密度、SEO优化、关键词优化等。
-
overflow-wrap检查当前行剩余空间，只在放不下时才劈开长词 - 它尊重原有语义断点（空格、标点），比
break-all更友好 - 注意：它不改变单词内部断行规则，只是“允许”断，是否断由
word-break或浏览器默认策略决定
中文和中英混排场景，word-break: keep-all反而更常用
中文本身没有空格分词，浏览器默认就会在字之间换行。但加了英文后（比如测试test123456789），英文部分可能溢出。这时设word-break: keep-all可阻止中文被意外劈开，同时让英文按overflow-wrap规则处理。
典型组合是：word-break: keep-all; overflow-wrap: break-word;
-
keep-all对中文/日文/韩文有效，对纯英文无效（英文仍会按字母断） - 如果容器内有大量代码片段（如
const myVariableName = 123），建议额外加white-space: pre-wrap保留缩进和换行 - 移动端 WebView 对
keep-all支持略差，iOS 12 以下可能需要-webkit-word-break: keep-all
Flex/Grid 容器里长单词不换行？先看min-width是否锁死了
即使写了word-break: break-all，在display: flex或grid布局中仍可能失效——因为子项默认min-width: auto，会抵抗压缩，优先伸展容器而不是换行。
解决方法不是调word-break，而是松开尺寸约束：
- 给子元素加
min-width: 0（flex 项）或min-width: 0+overflow: hidden（grid 项） - 避免在父容器上用
white-space: nowrap，它会覆盖所有换行设置 - 调试时右键检查元素，看 computed 样式里
word-break是否被更高优先级规则覆盖
换行不是孤立的 CSS 属性，它总和盒模型、布局上下文、继承链缠在一起。一个break-all写不对位置，就等于没写。
