Is there a CSS selector for "multiple lines"?

Question

I have a (navigation) menu on my website like this:

a
{
  background:red;
}

<a href="#">Home</a>
<a href="#">Downloads</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>

If the screen is wide enough, the menu will show in one single line.

But if the screen is not wide enough (e.g. for smartphones) there will be more lines.

Is there a CSS selector for this case?

For this example it would be enough to change the background color to green with such a selector.

Answer 1

A kind of hacky idea in case you know your font values and more precisely the height of one line.

Resize the screen and see the magic:

.nav {
  position:relative; /* relative here, no on the links */
  font-size:20px;
  line-height:1.2em; /* height of a line*/
  z-index:0;
} 

a {
  clip-path:inset(0); /* clip the pseudo element to the element size */
  display:inline-block;
  color:#fff;
  padding:0 10px;
}
a:before {
 content:"";
 position:absolute;
 z-index:-1;
 inset:0;
 background:
   /* green will get visible if 100% (height) is bigger than 1.2em (one line) */
   linear-gradient(green 0 0) 0/100% calc(100% - 1.2em),
   red;
}

<div class="nav">
<a href="#">Home</a>
<a href="#">Downloads</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>
</div>