Css &引用；换行：断开单词“；具有内联块子级

我有一个包含混合

display:inline

和

display:inline block

元素的div，当父级应用了

wordwrap:break word

时，我试图让它正确地换行

例如，如果我有

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

hihellomoremore

我希望文本换行可以像

wordwrap:break-word

通常那样，并在需要的地方换行。相反，我得到的是

内联块

元素后面的一个中断。有没有办法改变这种行为

我在代码笔中设置了一个最小的示例：

---

要查看我想要的内容，只需在

的样式中注释掉

显示：内联块

，尝试在父级

div中设置
空白：pre

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

这是一个更新的代码笔：

根据文件，取自

pre

保留空格序列，仅在源中的换行符和
元素处断行

通过添加属性显示：内容；跨越。它适合我。
为什么
内联块
不只是使用内联元素？这是一个简化的示例，我需要能够在实际用例中设置宽度和高度，并在元素上设置边距。这不起作用：它根本不换行。空白：预先禁用所有包装。word wrap属性说明如何包装，但不启用包装。