除非 CSS 必要，否则避免换行答案

【问题标题】：Avoiding line wrapping unless necessary with CSS除非 CSS 必要，否则避免换行
【发布时间】：2013-11-05 15:25:01
【问题描述】：

是否可以使用 CSS 自动控制换行，以便在调整浏览器窗口大小时发生以下情况：

HTML：

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

所以三种可能的观点是：

1：

Lorem ipsum dolor: sat amet consectetur adipiscing eli

2：

Lorem ipsum dolor:
坐在 amet consectetur adipiscing eli 上

3：

Lorem ipsum dolor:
坐上 amet consectetur
爱丽丝

s1 中的单词总是相同的，但 s2 中的单词可能会有所不同，所以我不能仅仅根据页面的宽度更改white-space:nowrap。

浏览器支持不是什么大问题，只要它在 Chrome 和/或 Firefox 中运行。

这是一个简单的JSFiddle，您可以使用。

【问题讨论】：

标签： css

【解决方案1】：

只需将 s2（或者，可选地，s1 和 s2）都设为内联块：

#s2 {
    display: inline-block;
}

当有足够的空间时，这允许整个 s2 框与 s1 在同一行上流动，然后按照您的第二点所述进行包装，然后按照您的第三点所述进行包装（因为内联块的行为就像您的调整大小和包装其内容时的容器块元素）。如果您有兴趣，请在spec 中对此进行详细说明。

【讨论】：

【解决方案2】：

另一种方式：

display: block;
float: left;

别忘了给父元素一个clearfix；

【讨论】：

您的 clearfix 在旧 IE 中不起作用，如果您已经在使用 overflow: hidden，则不需要它。事实上，我的答案不需要破解，因为旧的 IE 实际上确实支持 display: inline-block 上的自然内联元素，如 span。
是的，这是真的。我为 ie8 及更高版本添加了“最新”的 clearfix 方法。