css - "word-wrap: break-word"带有内联 block 子项

Question

我有一个混合了 display: inline 的 div和 display: inline-block元素，当父级有 word-wrap: break-word 时，我试图让它长行正确换行应用。

例如，如果我有

<div><span>hihihi</span><span style='display: inline-block'>hello</span>moremoremore</div>

我希望文本换行表现为 word-wrap: break-word通常会，并在需要时中断。我得到的是在 inline-block 之后立即休息元素。有什么办法可以改变这种行为吗？

我在代码笔中设置了一个最小示例:http://codepen.io/anon/pen/vEXdMR

要看我想要什么，注释掉display: inline-block就可以了在 <b> 的样式中.

Answer 1

尝试在父 div 中设置 white-space: pre

div
{
  margin: 20px;
  width: 60px;
  word-wrap: break-word;
  white-space: pre;
 }

这是一个更新的代码笔:http://codepen.io/anon/pen/ByLYgv

根据文档，取自 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

pre

Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.