在chrome中,自动换行:即使没有空格,break-word也会破坏单词

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>

小提琴: https ://jsfiddle.net/7sq3ybxr/

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

有没有人知道导致这种行为的原因或是否有解决方法的想法？但是,大小,浮点和自动换行属性必须保留.

编辑:哦,顺便说一句,写这样的标记似乎解决了它,但它不是我可以控制的东西(想象用户通过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小提琴