有CSS的方式知道一个元素是否包裹到一个新行？ [英] Is there a CSS way to know if an element has wrapped to a new line?

问题描述

如果我在一行上有多个inline-block元素，我希望能够以不同的方式为包装到下一行的元素设置样式。

If I have a number of inline-block elements on a line, I want to be able to style the elements that have wrapped to the next line differently.

例如

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

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

So, when the browser width < 1000, the second child <div> can have different styling.

我知道我可以在js ，但我试图避免它。我也知道我可以使用媒体查询，但我担心最小宽度截止可能不完全一样，当< div> 的换行不知道他们的确切大小。）

I know I can do it in js, but I am trying to avoid it. I also know I can use media queries, but I am concerned that the min-width cutoff may not be exactly the same as when the <div>'s wrap (I do not know their exact sizes).

推荐答案

CSS只提供 :: first- code>伪元素用于标识行框中的第一行。它不为任何其他行提供任何伪元素，也不提供任何伪类，以根据它们所在的行匹配行内元素。

CSS only provides a ::first-line pseudo-element for identifying the first line in a run of line boxes. It does not provide any pseudo-elements for any other lines, nor does it provide any pseudo-classes for matching inline-level elements based on the line they are on.

您可以使用 ::第一行以不同的方式设置第一行元素的样式（即，而不是为第二行元素设置样式，将这些样式应用于所有行， line），但这只适用于有限的一组属性。

You can use ::first-line to style the first line of elements differently (i.e. instead of styling the second line of elements, apply those styles to all lines and style the first line as originally intended), but this only works for a limited set of properties.

这篇关于有CSS的方式知道一个元素是否包裹到一个新行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！