css - 有没有一种 CSS 方法可以知道元素是否换行？

Question

如果我在一行中有多个行内 block 元素，我希望能够以不同方式设置已换行到下一行的元素的样式。

例如

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

所以，当浏览器宽度 < 1000 时，第二个 child <div>可以有不同的样式。

我知道我可以在 js 中做到这一点，但我正在努力避免它。我也知道我可以使用媒体查询，但我担心最小宽度截止值可能与 <div> 时不完全相同。的包装(我不知道它们的确切尺寸)。

Answer 1

CSS 只提供了一个::first-line 伪元素来标识一行行框的第一行。它不为任何其他行提供任何伪元素，也不提供任何伪类以根据它们所在的行匹配行内级元素。

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