gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 15:47:41 25 4
gpt4 key购买 nike

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

  • 当 s1 和 s2 都可以放入 div 时,它们会保持在同一行
  • 当 s2 不换行就不能同时容纳时,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: sit amet consectetur adipiscing eli

2:

Lorem ipsum dolor:
sit amet consectetur adipiscing eli

3:

Lorem ipsum dolor:
sit amet consectetur
adipiscing eli

s1 中的词始终相同,但 s2 中的词可能会有所不同,因此我不能仅根据页面宽度更改 white-space:nowrap

浏览器支持不是大问题,只要它在 Chrome 和/或 Firefox 中运行即可。

这是一个简单的 JSFiddle你可以一起工作。

最佳答案

简单地使 s2(或者,s1 和 s2,可选)成为一个内联 block :

#s2 {
display: inline-block;
}

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

Updated fiddle

关于css - 除非必要,否则避免使用 CSS 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19607979/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com