Как сделать перенос слов с помощью CSS: примеры и советы

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

Для выполнения переноса слов в CSS, можно использовать свойство "word-wrap" и "hyphens".

Свойство "word-wrap" указывает, разрешить или запретить разрыв слова, если оно не помещается в доступный пространство. Значение "break-word" указывает, что слово должно разрываться, если оно не помещается в строку. Например:

css
p {
  word-wrap: break-word;
}

Свойство "hyphens" определяет, какие слова должны быть дополнительно разбиты на части для того, чтобы поместиться в контейнер. У свойства есть три значения: "none" (нет разбиения), "manual" (разбиение может быть выполнено только вручную с помощью явного дефиса) и "auto" (автоматическое разбиение слова). Например:

css
p {
  hyphens: auto;
}

Также можно применять комбинацию обоих свойств "word-wrap" и "hyphens", что позволяет управлять переносом слов на более точном уровне. Например:

css
p {
  word-wrap: break-word;
  hyphens: auto;
}

Еще один пример использования свойства "hyphens" для реализации переноса слов:

css
p {
  hyphens: auto;
  max-width: 500px;
  margin: 0 auto;
}

В этом примере слова будут автоматически разбиваться на части внутри элемента

, если не помещаются в родительском контейнере шириной 500px. Расположение

будет выровнено по центру родительского контейнера благодаря маргину.

В целом, использование свойств "word-wrap" и "hyphens" позволяет управлять переносом слов с помощью CSS и обеспечить лучшую читабельность текста на экранах различных размеров.