Firefox 基于空格的存在强制执行分词属性答案

【问题标题】：Firefox enforces word-break property based on whitespace existenceFirefox 基于空格的存在强制执行分词属性
【发布时间】：2020-10-16 19:07:06
【问题描述】：

下面是两个sn-ps。它们唯一的区别是HTML-Whitespace-placement，除了空格之外，它们应该以相同的方式呈现。虽然在 Chrome 中是这种情况，但在 Firefox 中，它们会脱离其父容器。

这提出了两个问题：

这是预期行为还是错误？
如何摆脱 Firefox 的怪癖？

#inner {
  width: 300px;
  word-break: break-word;
}

.unit {
  white-space: nowrap;
}

<div id="inner">
  <span class="unit">
    <span>Group One:</span>
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
  </span>
  <span class="unit">
    <span>Group Two:</span>
    <span>Four</span>
    <span>Five</span>
    <span>Six</span>
  </span>
  <span class="unit">
    <span>Group Three:</span>
    <span>Seven</span>
    <span>Eight</span>
    <span>Nine</span>
  </span>
</div>

#inner {
  width: 300px;
  word-break: break-word;
}

.unit {
  white-space: nowrap;
}

&lt;div id="inner"&gt;&lt;span class="unit"&gt;&lt;span&gt;Group One:&lt;/span&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/span&gt;&lt;span class="unit"&gt;&lt;span&gt;Group Two:&lt;/span&gt;&lt;span&gt;Four&lt;/span&gt;&lt;span&gt;Five&lt;/span&gt;&lt;span&gt;Six&lt;/span&gt;&lt;/span&gt;&lt;span class="unit"&gt;&lt;span&gt;Group Three:&lt;/span&gt;&lt;span&gt;Seven&lt;/span&gt;&lt;span&gt;Eight&lt;/span&gt;&lt;span&gt;Nine&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

【问题讨论】：

可能支持不是 100% 或者你发现了一个错误
@TemaniAfif 我创建了一个报告：bugzilla.mozilla.org/show_bug.cgi?id=1670705

标签： html css google-chrome firefox

【解决方案1】：

使用break-all 代替break-word 并将inline-block 添加到单元元素中

#inner {
  width: 300px;
  word-break: break-all;
}

.unit {
  display: inline-block;
  white-space: nowrap;
}

&lt;div id="inner"&gt;&lt;span class="unit"&gt;&lt;span&gt;Group One:&lt;/span&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/span&gt;&lt;span class="unit"&gt;&lt;span&gt;Group Two:&lt;/span&gt;&lt;span&gt;Four&lt;/span&gt;&lt;span&gt;Five&lt;/span&gt;&lt;span&gt;Six&lt;/span&gt;&lt;/span&gt;&lt;span class="unit"&gt;&lt;span&gt;Group Three:&lt;/span&gt;&lt;span&gt;Seven&lt;/span&gt;&lt;span&gt;Eight&lt;/span&gt;&lt;span&gt;Nine&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

【讨论】：