Is there a CSS selector for "multiple lines"?-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

html:

  <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styleSheet3.css" rel="stylesheet" />
    <title>Document</title>
</head>

<body>

    <div id="nav">
        <a href="#" class="active"> Home</a>
        <a href="#">Downloads</a>
        <a href="#">Downloads </a>
        <a href="#">Contact</a>
        <a href="#">FAQ</a>
        <a href="#">Disclaimer</a>
    </div>
    <div id="small_nav">
        <div id="header">
            <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
                <g>
                    <path id="path1" transform="rotate(0,24,24) translate(9,13.0382820367813) scale(0.9375,0.9375)  "
                        fill="#1C9E51"
                        d="M1.230957,19.693036L30.768982,19.693036C31.506958,19.693036,32,20.185041,32,20.923019L32,22.154038C32,22.893054,31.506958,23.384999,30.768982,23.384999L1.230957,23.384999C0.49194336,23.384999,0,22.893054,0,22.154038L0,20.923019C0,20.185041,0.49194336,19.693036,1.230957,19.693036z M1.230957,9.8470059L30.768982,9.8470059C31.506958,9.8470059,32,10.339011,32,11.076989L32,12.30801C32,13.045987,31.506958,13.53903,30.768982,13.53903L1.230957,13.53903C0.49194336,13.53903,0,13.047025,0,12.30801L0,11.076989C0,10.339011,0.49194336,9.8470059,1.230957,9.8470059z M1.230957,0L30.768982,0C31.506958,-6.3337211E-08,32,0.49298194,32,1.2309594L32,2.4619804C32,3.1999579,31.506958,3.6930011,30.768982,3.6930013L1.230957,3.6930013C0.49194336,3.6930011,0,3.1999579,0,2.4619804L0,1.2309594C0,0.49298194,0.49194336,-6.3337211E-08,1.230957,0z" />
                </g>
            </svg>

        </div>


        <div id="content">
            <a href="#">Home</a>
            <a href="#">Downloads</a>
            <a href="#">Contact</a>
            <a href="#">FAQ</a>
            <a href="#">Disclaimer</a>
        </div>
</body>

</html>

and css:

body
{direction:rtl;
}
#nav {
   
   display: table;
   width: 100%
}
    
#nav  span a {
 
  

    display:block !important;
    width:100%;
    text-align:center
}
#nav span {
    display: block;
    text-align: center
}
#small_nav a {
    display: block;
    text-decoration: none;
   
 
}
a
{
  background:red;
}
   
#small_nav #content {
    display: none;
   
}
#small_nav:hover #content{display:block}
#small_nav {
    cursor: pointer;
    display: none
}
@media screen and (max-width:600px) {
    #small_nav {
        display: block;
    }

    #nav {
        display: none
    }
}

A bit long, but I think it's good, lots of success!

CodePudding user response：

you need to create a div container and assign ID to it. Next step is to use CSS with this assigned ID.

Smth like this:

#navbar{
*and your code here*
}

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