"word-wrap: break-word" 与内联块子元素

Question

我有一个包含混合 display: inline 和 display: inline-block 元素的 div，当父元素应用了 word-wrap: break-word 时，我想要正确地换行长行。

例如，如果我有：

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

我希望文本换行的表现像正常情况下的word-wrap: break-word，并在需要时进行分割。但我得到的是在inline-block元素之后就会断开。有没有办法改变这种行为？

我在CodePen中设置了一个最小的示例：http://codepen.io/anon/pen/vEXdMR 要查看我想要的效果，只需将<b>的样式中的display: inline-block注释掉即可。

- Aaron Yodaiken

---

为什么要使用 inline-block 而不是直接使用内联元素？ - Telmo Marques

这只是一个简化的例子，实际使用中我需要能够设置宽度和高度，并在元素上设置边距。 - Aaron Yodaiken

Answer 1

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

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

这是更新后的codepen链接：http://codepen.io/anon/pen/ByLYgv 根据文档，引用自https://developer.mozilla.org/en-US/docs/Web/CSS/white-space：

    pre
    保留空白符序列，只在源代码中的换行符和<br>元素处进行折行。

- Telmo Marques

---

这不起作用：它根本不换行。white-space:pre 禁用所有换行。word-wrap 属性说明如何换行，但不会启用换行。 - JasonWoof

Answer 2

通过将属性 display: contents; 添加到 <span> 标签中，它对我起作用。

- Evgeniia I.