Как сделать перенос на новую строку при padding?

Чтобы сделать перенос на новую строку при использовании CSS свойства padding, вам необходимо использовать свойство overflow и значение word-wrap.

Вариант 1: Использование свойства overflow
Когда задана ширина блока, а внутреннее содержимое выходит за пределы этой ширины из-за padding, вы можете применить свойство overflow с значением auto или hidden к блоку. Например:

.container {
  width: 300px;
  padding: 20px;
  overflow: auto;
}

Это позволит блоку создать горизонтальную полосу прокрутки, если содержимое выходит за его пределы, а также переносить текст на новую строку, когда нужно.

Вариант 2: Использование свойства word-wrap
Свойство word-wrap определяет, как браузер должен обрабатывать длинные слова и строковые переносы внутри элемента. Чтобы сделать перенос на новую строку при padding, вы можете использовать свойство word-wrap со значением break-word. Например:

.container {
  padding: 20px;
  word-wrap: break-word;
}

Это заставит браузер разбивать длинные слова или строки, которые не вмещаются в блок с заданным padding, на новые строки, чтобы сохранить видимость всего содержимого.

Оба эти варианта позволяют обойти ограничения свойства padding и гарантировать перенос содержимого на новую строку при необходимости. Выбор между ними зависит от конкретной ситуации и требований вашего дизайна.