有没有CSS方法来知道元素是否已包装到新行？

Question

如果我在一行上有许多内联块元素,我希望能够以不同的方式设置包裹到下一行的元素的样式.

例如

<div class='wrapper'>
    <div style='display: inline-block; width: 500px'>...</div>
    <div style='display: inline-block; width: 500px'>...</div>
</div>

因此,当浏览器宽度<1000时,第二个孩子<div>可以具有不同的样式.

我知道我可以用js来做,但我试图避免它.我也知道我可以使用媒体查询,但我担心最小宽度截止可能与<div>包裹时不完全相同(我不知道它们的确切大小).

Answer 1

CSS仅提供::first-line用于标识一行行框中第一行的伪元素.它不提供任何其他线路的任何伪元素,也不匹配基于它们就行了内嵌级元件提供任何伪类.

您可以使用::first-line不同方式对第一行元素进行样式设置(即,不是为第二行元素设置样式,将这些样式应用于所有行并按原样预设第一行样式),但这仅适用于一组有限的属性.