`white-space: nowrap` 怪異

Question

我在使用white-space: nowrap時遇到了一個奇怪的情況white-space: nowrap兩個span元素上的white-space: nowrap 。

除了防止span內的換行符，它還可以防止span元素之間的換行符。

如果我將span元素並排放置在我的代碼的同一行上，則第二個span不能放到下一行。

如果我將相同的span元素放置在不同的行上（或在其間使用空格），則第二個跨度將下降。

根據MDN 文檔，空白應該只處理元素內部的空間。

如果兩個span元素的總寬度比容器div寬，我如何獲得第二個 span 下降的行為？ （僅使用 CSS，同時將文本保持在同一行的跨度內）

 span{ white-space: nowrap; } div{ width: 5em; padding: 1em; border: 1px solid black; margin: 0.5em; }

 <div> <span>Hello there.</span><span> I don t wrap at all!</span> </div> <div> <span>Hello there.</span> <span>I do wrap!!!</span> </div>

Answer 1

好的，這是你的問題。

這實際上不是一個錯誤。
發生的事情是， <span>父 div 的默認顯示 CSS 屬性是內聯的

當您在代碼中添加中斷時，瀏覽器會將其解釋為新行，因此<span>元素被放置在新行上。 通過簡單地給第一個 div 中的 span 元素一個 display:block 屬性可以解決這個問題。

 span{ white-space: nowrap; } div{ width: 5em; padding: 1em; border: 1px solid black; margin: 0.5em; }

 <div> <span>Hello there.</span><span style='display:block;'> I don t wrap at all!</span> </div> <div> <span>Hello there.</span> <span>I don t wrap at all!</span> </div>

編輯：

不過，denmch 確實說明了一點，在我的回答中，我只是調試了您的帖子或考慮了您在說什么。 你不明白什么是 white-space:nowrap; 做。 您的問題與根本不環繞的元素的定位有關。

編輯：

這只是為了向 OP 澄清：

您的問題與瀏覽器中 HTML 和 CSS 屬性的默認處理有關。 因此，他的 HTML 不可能實現純粹的 CSS 解決方案。

參考： https : //www.w3schools.com/cssref/pr_class_display.asp

Answer 2

好的，由於 denmch 沒有發布正式答案，我將自己發布。 我認為正在發生的事情。

因為 span 彼此相鄰，瀏覽器之間沒有換行符或空格，所以瀏覽器將兩個 span 元素解釋為white-space: nowrap; 作為一個詞。 基本上是這樣的：

 span{ color: red; }

 <p><span>He</span>llo</p>

在這種情況下，不包裝這個詞是有意義的。 所以這就是內聯元素的行為方式。 我們可以簡單地將display更改為display: inline-block 。 現在該元素失去了它作為inline元素時的行為。

因此我們可以添加display: inline-block 。 現在它會將 span 內的文本視為單個單詞，如果兩個span元素的內容不適合 div 的寬度，則相關的 span 將下拉：

 span{ white-space: nowrap; } span.inline-block{ display: inline-block; } div{ width: 8em; padding: 1em; border: 1px solid black; margin: 0.5em; } div>span:first-child{ background: yellow; } div>span:nth-child(2){ background: red; }

 <div> <span>Hello there.</span><span>I don t wrap at all!</span> </div> <div> <span class='inline-block'>Hello there.</span> <span class='inline-block'>I do wrap!!!</span> </div>

希望它有幫助:)