Как переносить текст в CSS

В CSS есть несколько свойств для управления переносом текста. Два наиболее распространенных свойства — это word-wrap и white-space.

Свойство word-wrap позволяет переносить длинные слова, которые не помещаются на одной строке. Оно может быть установлено как normal (по умолчанию), break-word, или initial. Вот пример использования:

p {
  word-wrap: break-word;
}

Этот код позволяет переносить слова, если они слишком длинные и не помещаются в строке. Свойство white-space управляет тем, как браузер должен обрабатывать пробелы и переносы строк в тексте.

Когда white-space установлено как normal (по умолчанию), то браузер автоматически склеивает все пробелы в тексте, оставляя только один пробел между словами. Если вы хотите перенести текст в новую строку при помощи <br>, то используйте свойство white-space:

p {
  white-space: pre-line;
}

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

Еще одно свойство, которое можно использовать для переноса текста, — это overflow-wrap. Оно позволяет переносить длинные слова, которые не могут быть разбиты на несколько строк. Например, если длинное слово не может поместиться на текущей строке, оно будет смещено в следующую строку. Вот пример:

p {
  overflow-wrap: break-word;
}

В целом, это основные свойства, которые можно использовать, чтобы управлять переносом текста в CSS.