當空間之間的跨度元素不流入？

爲什麼空的<span>元素不符合流動時夾在<span>元素之間的空格？當空間之間的跨度元素不流入？

下面是一個例子：

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span class="space"> </span><span class="empty"></span><span class="empty"></span><span class="empty"></span><span class="space"> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span>

上面，我們有一些<span>元素構成的短語。但是我在兩個空間之間放置了一些空的元素。結果將空元素從流中取出。如果您使用調試工具，您會看到span.empty元素不再流入，並且被認爲是0px，0px寬。

做不纏繞空間元素相同，和空元素是早在流量：

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span class="empty"></span><span class="empty"></span><span class="empty"></span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span>

誰能解釋這是爲什麼？我使用Chrome 45

來源

2015-09-09 shennan

默認情況下，瀏覽器會崩潰的空間序列到一個單一的空間。我相信這背後的主要原因是，標記可以縮進可維護性而不影響最終的渲染輸出。

在這兩個示例中，.emptyspan都不包含任何內容，並且設置爲默認display: inline;，這意味着它們不會佔用任何水平空間。這兩個示例之間的區別在於它們之間的差異：

在第一個示例中，它們位於兩個空格之間，因此摺疊不存在。你會得到相同的結果，如果.emptyspan小號中包含空格，
在你的第二個例子，他們被人物包圍，因此空白崩潰不會在幾個不同的瀏覽器的生效

測試，這似乎是Chrome如何決定顯示摺疊的元素。 Firefox和Opera會以不同的方式執行操作，並以相同的方式處理您的兩個示例中的.emptyspan s（根本不顯示它們）。

來源

2015-09-09 12:19:13

很棒的回答。此外，有用的知道什麼火狐和Opera正在渲染。謝謝。 – shennan

您需要使用非打破空間：

<span>&nbsp;</span>

來源

2015-09-09 11:00:13

是的，我已經嘗試過，它的工作原理，但它並沒有真正回答這個問題「任何人都可以解釋爲什麼這是？」。我不想使用非空格的原因是因爲我想要空格繼續打破。 – shennan

如果您不使用非中斷空間，那麼瀏覽器將忽略該空間。 –

對不起，但這仍然不能解釋爲什麼。 – shennan

span標籤display:inline默認，但通過在代碼white-space受到影響。

白色空間沒有大小它自己的，但它確實使

來源

2015-09-09 11:32:07

當空間之間的跨度元素不流入？

回答

相關問題