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

Question

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

e.g。

<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以不同方式设置第一行元素的样式（即，不是为第二行元素设置样式，将这些样式应用于所有行，并按照原定的方式设置第一行样式），但这仅适用对于一组有限的属性。