Как сокращать меню на мобильном до трех точек?

Question

[puple_gal]

Есть меню такого вида
По мере сужения экрана нужно сокращать меню до такого вида

Может есть какие-то примеры?

Answer 1

[puple_gal]

Может кому понадобится - примерное решение https://codepen.io/lukejacksonn/pen/PwmwWV

Answer 2

[Валентин]

p.clip {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
   }

<p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы, 
  в таком случае эксцентриситеты и наклоны орбит возрастают.</p>

Comments

[2cha.headz]

этим вы просто текст обрежете, автор же просит решение, которое пункт4 и пункт5 спрячет под кнопку "..." при клике на которую каким-то образом покажутся остальные пункты

Answer 3

[user_tm]

Изучи адаптивную верстку, а именно "медиа запросы" где каждый медиа запрос имеет свои правила (т.е. свой код css) и к каждому расширению (размеру) экрана ты прописываешь свои медиа запрос. Вот пример

@media (min-width: 992px) and (max-width: 1199px) {/*это ты типа говоришь браузеру "эй бро браузер
 я хочу при размере экрана от 992px до 1199px вот такие правила:" и пишешь ниже css код для следующих дивов*/
  .div1 {
    width: 200px;
    height: 100px;
  }

  .div2 {
    width: 200px;
    height: 100px;
    background-color: #000;
  }
}/*здесь заканчивается запрос и ниже начинаешь писать другой запрос*/
@media (min-width: 768px) and (max-width: 991px) {/*тут ты снова обращаешься к браузеру и как буд то
 говоришь ему "а вот при размере экрана от 768px до 991px я хочу для тех же дивов другие правила (т.е. др. css код)"  и пишиш другой код*/
 .div1 {
    width: 150px; /*допустим меняешь ширину*/
    height: 100px;
  }

  .div2 {
    width: 200px;
    height: 100px;
    background-color: #353535; /*меняешь цвет можно что у годно сделать и даже отключить див прописав ему display: none;*/
  }
}

вот как то так