＆＃34;自动换行：break-word＆＃34;与内联块儿童

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

要查看我想要的内容，只需在display: inline-block的样式中注释掉<b>。

Answer 1

尝试在您的父white-space: pre

中设置div

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

  

<强>预

     

保留空白的序列，仅在源中的换行符处以及＆lt; br＆gt;处断行。元件。

Answer 2

通过添加属性显示：内容；跨越。它对我有用。