Как сделать чтобы блоки не переносились?

Question

[MrLisovich]

Как сделать, чтобы блоки не переносились на новую строку при мобильном размере, а уменьшались пропорционально с размером экрана?

CodePen

Comments

[uRoot]

Лучше использовать бургер меню - красиво и практично

[Максим Тимофеев]

Все вокруг решают эту проблему через меню гамбургер. Почему Вы решили иначе?

Answer 1

[Rustam Bainazarov]

Ну как бы вам сказать. Размер блоков — это одно. Их уместить в строку просто. Сложнее уместить шрифт, который не адаптивен по своей сути.

Но есть один метод:
https://css-tricks.com/snippets/css/fluid-typography/

Нужно будет скопировать сниппет, задать нужные параметры методом пробы.

Answer 2

[Ankhena]

Вы, конечно, можете задать размер шрифта в vw. Но когда шрифт станет микроскопическим что делать станете?
На мобильных размерах нужно перестраивать меню в вертикальное.

Answer 3

[AngReload]

.editor-item ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* переносить слова? */
}

.editor-item ul li{
  overflow: hidden;
  list-style: none;
  display: inline-block;
  padding: 10px;
}

https://codepen.io/AngReload/pen/JwRemO?editors=1100
Разумеется, при ширине меньше 350px текст не вмещается и обрезается.