Firefox随机断词问题：如何阻止(09/03/2017)被拆分换行？

我完全懂你这种 frustration——明明已经尝试了常规的CSS断词控制属性，Firefox却还是把像(09/03/2017)这种短日期拆得七零八落，和其他浏览器的表现不一致，确实挺闹心的。

针对这个问题，给你几个针对性的解决方案，亲测在Firefox最新版本里有效：

方案1：用white-space: nowrap强制不换行 #

这是最直接有效的方法，给需要保持完整的日期文本包裹一个容器，然后设置white-space: nowrap，强制浏览器把这段内容当作一个整体处理，不会拆分换行。

CSS代码：

.date-preserve {
  white-space: nowrap;
}

HTML使用：

<span class="date-preserve">(09/03/2017)</span>

方案2：组合使用断词控制属性（备选） #

如果不想用nowrap，可以尝试组合设置以下属性，进一步限制Firefox的自动断词行为：

.date-preserve {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

不过这个方案的兼容性和稳定性不如第一种，尤其是对于带特殊符号的文本，white-space: nowrap的可靠性更高。

为什么之前的设置没用？ #

Firefox的自动断词规则在处理包含特殊字符（比如斜杠、括号）的文本时，会有特殊的判断逻辑，常规的word-break: keep-all有时候无法覆盖这种场景，而white-space: nowrap是从根本上禁止了元素内的任何换行拆分，所以能彻底解决问题。

内容的提问来源于stack exchange，提问作者DevWizard