时间戳

首页 > 解决方案 > Firefox 基于空格的存在强制执行分词属性

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

问题描述

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

这提出了两个问题：

  1. 这是预期的行为还是错误？
  2. 我怎样才能在这里摆脱 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;
}
<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>

标签： htmlcssgoogle-chromefirefox

解决方案

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

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

.unit {
  display: inline-block;
  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>

推荐阅读