避免換行，除非必要，CSS

是否有可能使用CSS來自動控制換行以這樣的方式將發生以下情況在瀏覽器窗口大小：避免換行，除非必要，CSS

HTML：

<body> 
    <div> 
     <span id="s1">Lorem ipsum dolor:</span> 
     <span id="s2">sit amet consectetur adipiscing eli</span> 
    </div> 
</body>

所以三種可能的觀點是：

1：

Lorem存有悲：坐阿梅德consectetur adipiscing禮

2：

Lorem存有dolor：
坐阿梅特consectetur adipiscing埃利

3：

Lorem存有悲：
坐阿梅特consectetur
adipiscing埃利

S1中的字總是相同的，但s2中的單詞可能會有所不同，所以我不能只根據頁面的寬度更改white-space:nowrap。

一旦它在Chrome和/或Firefox中運行，瀏覽器支持不是一個大問題。

下面是一個簡單的JSFiddle你可以使用。

2013-10-26 Vaughan

只需使S2（或任選地，兩個S1和S2）的內聯塊：

#s2 { 
    display: inline-block; 
}

這允許整個S2框流動在同一行上爲S1時，有足夠的空間，包裝紙如前在你的第二點中描述，然後在你的第三點中描述它的內容（因爲內聯塊在調整和包裝其內容時的行爲就像你的容器塊元素一樣）。如果您有興趣，請在spec中詳細說明。

2013-10-26 14:45:33 BoltClock

另一種方式：

display: block; 
float: left;

而且還dont't忘了給一個clearfix父元素;

2013-10-26 14:55:07

您clearfix不老的IE工作，如果你已經使用'溢出沒有必要爲它：hidden'。事實上，我沒有必要對我的答案進行破解，因爲舊的IE實際上在'span'等自然內聯元素上支持'display：inline-block'。 – BoltClock

是的，的確如此。我爲ie8和更高版本添加了'最新'clearfix方法。 –

回答