Как сделать перенос текста в css

Узнайте, как использовать свойство CSS "word-break", чтобы правильно переносить текст на новую строку в ваших проектах. Даны примеры кода и пояснения.

Перенос текста в CSS

Перенос текста — это когда длинный текст разбивается на несколько строк. В CSS существует два способа сделать это — через свойства white-space и word-wrap.

White-space

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

• normal: переносы строк не допускаются;
• pre: переносы строк допускаются, но пробелы не должны удаляться;
• nowrap: переносы строк не допускаются и пробелы не должны удаляться;
• pre-wrap: переносы строк допускаются и пробелы не должны удаляться;
• pre-line: переносы строк допускаются и пробелы должны удаляться.

Для использования white-space укажите его в вашем CSS файле:

.my-class {
  white-space: pre-wrap;
}

Теперь все элементы, которые имеют класс my-class, будут иметь переносы строк. Вы также можете использовать это свойство для других тагов, например, <p>:

p {
  white-space: pre-wrap;
}

Word-wrap

Word-wrap позволяет браузеру разбивать длинные слова на несколько строк. Для того чтобы включить это свойство, нужно указать значение break-word для свойства word-wrap:

.my-class {
  word-wrap: break-word;
}

Теперь все элементы, которые имеют класс my-class, будут иметь переносы слов. Вы также можете использовать это свойство для других тагов, например, <p>:

p {
  word-wrap: break-word;
}

Оба свойства white-space и word-wrap могут быть использованы вместе, например:

.my-class {
  white-space: pre-wrap;
  word-wrap: break-word;
}

Таким образом, вы можете легко сделать перенос текста в CSS, используя свойства white-space и word-wrap.