Is there a CSS way to know if an element has wrapped to a new line?

Question

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.

e.g.

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

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

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).

Answer 1

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.

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.