除非有必要使用CSS,否则避免换行

Question

是否可以使用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:坐下来欣赏伊莱

2:

Lorem ipsum dolor:
坐下来欣赏伊莱

3:

Lorem ipsum dolor:
坐下来欣赏
伊莱

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

一旦浏览器支持在Chrome和/或Firefox中运行,它就不是一个大问题.

这是一个可以使用的简单JSFiddle.

Answer 1

只需将s2(或者,可选地,s1和s2)都设为内联块:

#s2 {
    display: inline-block;
}

这允许整个s2框在有足够空间的情况下与s1在同一条线上流动,然后按照第二点所述进行包装,然后在第三点中描述其内容(因为内联块的行为类似于容器块元素)调整大小并包装其内容时).如果您感兴趣,请在规范中详细说明.