在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）会导致单词中断，即使右侧没有空间。较低者没有。我假设它与字符宽度有关。在其他浏览器中，单词始终显示在框下方，如预期的那样。

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

编辑：哦，顺便说一句，写这样的标记似乎可以修复它，但它不是我可以控制的东西（想象用户通过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中显示不需要的结果

可以采取哪些措施来避免此问题？

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JS Fiddle

Answer 2

css中的浮动元素会导致这样的错误。在以前版本的Internet Explorer中，我们曾经一直看到这样的问题。

如果我浮动一个元素，并希望其他元素保持完整，我通常会使用＆＃34; clear：both＆＃34;在下一个元素上，以便该元素和之后的元素不会受到影响。

Answer 3

在OIL或任何牢不可破的单词后面给出一个空格字符。这可能会修复错误。由于自动换行符打破了单词中的所有字母。

＆＃13;

＆＃13;

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

#box {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

<div id="parent">
      <div id="box"></div>
      <div class="box-2">OIL</div>
    </div>
    <div id="parent">
        <div id="box"></div>
        <div>
            OIL
        </div>
    </div>

Answer 5

浮动元素不在流，因此它们会重叠以下块，除非它们建立块格式化上下文。这不应该是一个问题，因为线框减少了，所以文本应该在全宽线框中被推到浮动下方。

但是，出于某种原因，这种布局会让Chrome感到困惑。要解决此问题，您可以使用display: inline-block建立块格式化上下文。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;