首页 文章

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

提问于
浏览 次
2

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

当

  • s1和s2都可以放在div中时，它们会保持在同一条线上

  • s2在没有包装的情况下不再适合时会掉到第二行

  • s2在它不再适合div时包裹

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你可以使用 .

css

2 回答

  • 1

    另一种方法：

    display: block;
float: left;

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

    DEMO

    回复于
  • 5

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

    #s2 {
    display: inline-block;
}

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

    Updated fiddle

    回复于

相关问题