有没有一种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>的包裹不完全相同（我不知道它们的确切大小）。

- brendangibson

---

这是一个很好的问题。我有一个需求，但我的问题涉及到display:flex和使用flex-wrap: wrap。如果知道项目是否已经换行以更改样式，那就太好了...这样事情就可以保持响应式，代码相对较少。 - Jessy

你可以使用JavaScript通过检查元素创建的矩形数量getClientRects().length > 1来实现。 - KyleMit

Answer 1

CSS只提供一个伪元素::first-line来识别一组行盒中的第一行。它不提供任何其他行的伪元素，也不提供任何基于它们所在行匹配内联级元素的伪类。

您可以使用::first-line来为元素的第一行设置不同的样式（即，而不是为元素的第二行设置样式，将这些样式应用于所有行，并将第一行的样式设置为原始意图），但这仅适用于有限的属性。

- BoltClock

---

是的，不幸的是，这似乎仅限于样式格式。您无法使用尺寸或可见性等有趣的功能。它支持的属性在此处：https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line - Jon Fagence