我有一個混合了display: inline和display: inline-block元素的div，當父元素應用了word-wrap: break-word時，我試圖讓它的長行正確換行。

舉個例子，如果我有

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

我希望文本換行像自動換行一樣:正常情況下自動換行，并在需要的地方換行。相反，我得到的是內聯塊元素后面的一個分隔符。有什么辦法可以改變這種行為？

我在代碼欄中設置了一個最小的例子:http://codepen.io/anon/pen/vEXdMR

要看到我想要的，只需在& ltb & gt。

嘗試在父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

在…之前

保留空白序列，只在源中的換行符和& ltbr & gt元素。

添加屬性display:contents；到& ltspan & gt。它對我有用。