Как обернуть текст с помощью CSS

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

Значения

Свойство overflow-wrap может принимать одно из следующих значений:

  • normal : значение по умолчанию. Браузер разбивает строки в соответствии с обычными правилами переноса строк; слова или непрерывные строки не разорвутся, даже если они переполнят контейнер.

  • break-word : слова или строки символов, которые слишком велики, чтобы поместиться в их контейнер, будут разорваны в произвольном месте, чтобы вызвать разрыв строки. Символ дефиса не будет вставлен, даже если используется свойство дефиса.

  • inherit : целевой элемент должен наследовать значение свойства overflow-wrap, определенного для его непосредственного родителя.

Реализация

Вот практическая реализация свойства overflow-wrap . Второй абзац с id = Overflow определяет дополнительное свойство overflow-wrap = break-word и дает нам желаемый результат.

  • Вывод
  • HTML
  • CSS (SCSS)
Оцените статью
nanomode.ru
Добавить комментарий