Как адаптировать текст?

Question

[RushV]

Всех приветствую!
Есть блок внутри блока текст.
Вопрос как адаптировать текст что бы не ходил за блок?

Comments

[Антон Литвиненко]

уменьшить шрифт

Answer 1

[karmyskove]

Тебе нужно использовать media запросы, к примеру:

@media (max-width: 1110px) {
  .text {
    font-size: 14px;
  }
}

Определяешь разрешение экрана с помощью dev tools где у тебя ломается верстка, это значение подставляешь в медиа запрос и переопределяешь свойства для класса в котором находиться твой текст.

Есть второй вариант, использовать формулу.
font-size: calc(16px + 6 * (100vw / 1064));
Расшифровка формулы:
1) параметр (16px) - минимальное значение шрифта на 320px;
2) параметр (6) - добавочное число, делает шрифт адаптивным. Вычисляется по формуле, вычитаем размер шрифта по макету от числа полученного в первом пункте.
3) параметр (100vw) - по умолчанию оставляем
4) параметр (1064) - ширина макета

Answer 2

[Дюша Метёлкин]

Привет, адекватно попроси, чтоб не дерзил за блок не ходил и всё будет себя спокойно вести за быки не заплывать. если лешака грести конечно он себе позволять многое будет за блок ходить.
Либо же можно включить word-wrap: break-word; для переноса букв, или же задать font-size: ; в vmax, vw