How to reduce menu on mobile to three?

There is a menu of this type 5c9b59c085bda983947894.jpeg
As you narrow the screen you need to reduce the menu to this
5c9b5957ebfcf837308053.jpeg
Maybe there are some examples?
March 19th 20 at 08:50
3 answers
March 19th 20 at 08:52
Solution
Maybe someone will need the approximate solution https://codepen.io/lukejacksonn/pen/PwmwWV
March 19th 20 at 08:54
p.clip {
 white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 }


<p class="clip">Magnetic field is negligible dampens the great circle of the celestial sphere, 
 in this case, the eccentricities and inclinations of the orbits increase.</p>
you just cut the text, the author asks for a solution that пункт4 and пункт5 be hidden under the "..." button clicking which somehow seems the rest of the items - Dylan3 commented on March 19th 20 at 08:57
March 19th 20 at 08:56
Learn adaptive layout, namely "media queries" where each media query has its own rules (ie, your css code) to each extension (size) of the screen you prescribe your media query. Here is an example
@media (min-width: 992px) and (max-width: 1199px) {/*if you think you can tell the browser "Hey bro browser
 I want when the screen size from 992px to 1199px these are the rules" and write below the following css code for DIVS*/
 .div1 {
 width: 200px;
 height: 100px;
}

 .div2 {
 width: 200px;
 height: 100px;
 background-color: #000;
}
}/*here ends the request below and start to write another query*/
@media (min-width: 768px) and (max-width: 991px) {/*here you turn again to the browser and as the Bud
 I tell him "but the size of the screen from 768px to 991px I want to the same DIVS other rules (i.e. css etc. code)" Pisces and other code*/
 .div1 {
 width: 150px; /*let's change the width*/
 height: 100px;
}

 .div2 {
 width: 200px;
 height: 100px;
 background-color: #353535; /*change the color can be anything to do, and even writing him off div display: none;*/
}
}

something like that

Find more questions by tags JavaScriptCSS