css - 在 chrome 中，自动换行 : break-word breaks words even if there is no space

Question

以下标记和 CSS 会导致 Chrome 中出现奇怪的行为:

#parent {
  background: yellow;
  height: 120px;
  margin-bottom: 20px;
  width: 100px;
  word-wrap: break-word;
}
#box {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
}

<div id="parent">
  <div id="box"></div>
  <div>OIL</div>
</div>
<div id="parent">
  <div id="box"></div>
  <div>OWL</div>
</div>

Fiddle: https://jsfiddle.net/7sq3ybxr/

上面的示例(包含单词 OIL)导致单词中断，即使右边没有空间。较低的没有。我假设它与字符宽度有关。在其他浏览器中，单词始终显示在方框下方，正如预期的那样。

是否有人知道导致此行为的原因或有解决方法的想法？但是，size、float 和 word-wrap 属性必须保留。

编辑:哦，顺便说一句，像这样编写标记似乎可以解决问题，但这不是我可以控制的(想象一下用户通过 tinyMCE 输入):

<div id="parent">
    <div id="box"></div>
    <div>
        OIL
    </div>
</div>

Answer 1

这似乎是 Chrome 中的一个错误。

在 Chrome 50.0.2661.102 m 中显示了预期的结果

在 Chrome 51.0.2704.103 m 中显示了不需要的结果

如何避免这个问题？

我想这个错误会及时修复，但与此同时您可以使用 letter-spacing 来增加字母占用的空间量并强制执行预期的行为。

.parent {
  background: yellow;
  height: 120px;
  margin-bottom: 20px;
  width: 100px;
  word-wrap: break-word;
}
.box {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
}
.word {
  letter-spacing: 1.8px;
}

<div class="parent">
  <div class="box"></div>
  <div class="word">OIL</div>
</div>
<div class="parent">
  <div class="box"></div>
  <div class="word">OWL</div>
</div>

JS Fiddle