文本在chrome中没有空间呈现

Question

我在chrome中遇到了有线行为作为第一个单词（，如果它有两个字母），段落中没有空格，即使代码中已经给出了空格。

我已将其缩小并通过删除break-word找到它，它可以正确呈现，也可以通过将float提供给P标记或将clear属性用于P标记，因为父标题标记已被赋予float，文本可以正确渲染空间。

我的问题是为什么单独前两个字母会发生这种情况，尝试将第一个单词更改为任意单词，除了两个字母外，您可以看到单词之间的空格。

小提琴（更新）

h2{float:left;width:100%;}
.wrap{word-wrap:break-word;}

<div class="wrap">
<h2>heading</h2>
<p>Lo ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis leo ut vulputate tristique. Cras at bibendum enim. Aliquam erat volutpat. Aenean iaculis ullamcorper sapien ut vehicula. Sed felis nisi, eleifend eu augue nec, sodales malesuada dolor. Quisque et risus quam. Maecenas ligula justo, auctor nec erat maximus, maximus tincidunt ipsum. Fusce bibendum magna in felis luctus, eu imperdiet orci accumsan. Aliquam interdum sagittis tellus, eu volutpat velit dignissim nec. Vivamus accumsan sagittis diam id maximus. Nam diam purus, accumsan in felis non, rutrum aliquet quam. In ac libero arcu. Mauris semper augue ipsum, vitae porta nulla iaculis non. Praesent a fringilla est, a pharetra tellus.</p>
</div>

Answer 1

您可以阅读here

  

word-break CSS属性用于指定是否断行   在文字中。

允许的值为：

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

break-word不是允许的值，因此我更改了值，然后将float属性移到了h2。

h2{width:100%;}
.wrap{word-break:keep-all;}

<div class="wrap">
<h2>heading</h2>
<p>Lo ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis leo ut vulputate tristique. Cras at bibendum enim. Aliquam erat volutpat. Aenean iaculis ullamcorper sapien ut vehicula. Sed felis nisi, eleifend eu augue nec, sodales malesuada dolor. Quisque et risus quam. Maecenas ligula justo, auctor nec erat maximus, maximus tincidunt ipsum. Fusce bibendum magna in felis luctus, eu imperdiet orci accumsan. Aliquam interdum sagittis tellus, eu volutpat velit dignissim nec. Vivamus accumsan sagittis diam id maximus. Nam diam purus, accumsan in felis non, rutrum aliquet quam. In ac libero arcu. Mauris semper augue ipsum, vitae porta nulla iaculis non. Praesent a fringilla est, a pharetra tellus.</p>
</div>

Answer 2

添加white-space: pre-wrap;以保留空间。

h2{float:left;width:100%;}
.wrap{word-break:break-word; white-space: pre-wrap; /* Chrome; W3C standard */}

<div class="wrap">
<h2>heading</h2>
<p>Lo ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis leo ut vulputate tristique. Cras at bibendum enim. Aliquam erat volutpat. Aenean iaculis ullamcorper sapien ut vehicula. Sed felis nisi, eleifend eu augue nec, sodales malesuada dolor. Quisque et risus quam. Maecenas ligula justo, auctor nec erat maximus, maximus tincidunt ipsum. Fusce bibendum magna in felis luctus, eu imperdiet orci accumsan. Aliquam interdum sagittis tellus, eu volutpat velit dignissim nec. Vivamus accumsan sagittis diam id maximus. Nam diam purus, accumsan in felis non, rutrum aliquet quam. In ac libero arcu. Mauris semper augue ipsum, vitae porta nulla iaculis non. Praesent a fringilla est, a pharetra tellus.</p>
</div>