firefox中word-break: break-all多断一次行是因gecko按grapheme cluster切分所致，非bug；需通过设置width/max-width、替换标点、禁用连字或改用overflow-wrap等方案适配。
Firefox中word-break: break-all多断一次行
Firefox在含Unicode标点（如全角顿号、破折号、中文引号）的混合文本里，word-break: break-all会比Chrome/Safari多断一次行——不是bug，是Gecko按grapheme cluster切分导致的。比如「测试——示例」可能被切成「测试——」+「示例」两行，而其他浏览器只在破折号后断。
实操建议：
- 若内容可控，用
white-space: pre-wrap+overflow-wrap: break-word替代word-break: break-all，避免grapheme敏感行为 - 若必须用
break-all，对含标点的文本提前做预处理：用正则把全角标点替换为半角（如／→/），降低cluster复杂度 - 加
font-feature-settings: "liga" 0可禁用连字，减少Firefox对标点组合的额外断点判断
Firefox下word-break不生效或换行失效
常见于display: table-cell或flex子项中——Firefox要求父容器明确声明width或max-width，否则word-break被忽略。这不是属性不支持，而是布局计算阶段跳过了断行逻辑。
实操建议：
- 给直接父容器加
width: 100%或max-width: 100%（哪怕只是max-width: min-content） - 避免在
flex项目上单独设word-break，改用min-width: 0+overflow-wrap: break-word - 对
table-cell，必须配合table-layout: fixed和显式width，否则Firefox完全不触发断行
Firefox与Safari混用overflow-wrap和word-break时优先级冲突
很多人写word-break: break-all; overflow-wrap: break-word想“双重保险”，结果Firefox照常换行，Safari反而不换——因为WebKit把overflow-wrap: break-word当更高优先级，一旦它判定能靠空格换行，就绕过break-all；Firefox则相反，break-all优先，overflow-wrap基本被忽略。
实操建议：
- 跨浏览器统一策略：只用
overflow-wrap: break-word+word-break: normal，兼容性更好且行为一致 - 真要强制字符级断行，删掉
overflow-wrap，只留word-break: break-all，并在Firefox中补hyphens: none防意外连字符断点 - 服务端渲染时，对Firefox UA可动态注入
-moz-hyphens: none，避免其自动启用连字符算法干扰
Firefox中textarea内word-break无效
textarea元素天生忽略word-break，这是规范行为，不是缺陷。所有浏览器都如此，但开发者常误以为是Firefox特有问题。
实操建议：
- 改用
contenteditable="true"的div替代textarea，再施加word-break: break-all - 保留
textarea时，用white-space: pre-wrap+overflow-wrap: break-word实现类效果（注意pre-wrap会保留原始换行符） - 若需保持表单语义，可在
textarea外层套div并设overflow: hidden，内部用JS监听input事件实时截断超长行
word-break的生效依赖布局上下文是否“已知宽度”，而不是单纯看CSS声明。没设width或max-width的flex子项、table-cell、inline-block，在Firefox里基本等于没写word-break。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
