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：坐下来欣赏eli

2：

Lorem ipsum dolor：
坐下来，让他们感激不尽。[/ p>

3：

Lorem ipsum dolor：
坐在旁边 adipiscing eli

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

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

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

Answer 1

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

#s2 {
    display: inline-block;
}

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

Answer 2

另一种方式：

display: block;
float: left;

并且也不要忘记给父元素一个clearfix;