Оборачивание и разрыв текста

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

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

CSS будет отображать переполнение таким образом, потому что что-то другое может привести к потере данных. В CSS потеря данных означает, что часть вашего контента исчезает. Итак, начальное значение overflow равно visible, и мы видим, как текст выходит за пределы. Обычно лучше видеть переполнение, даже если оно выглядит неряшливо. Если элементы исчезают или обрезаются, как было бы, если overflow было установлено в hidden, вы можете не заметить этого при предварительном просмотре вашего сайта. Неряшливое переполнение хотя бы легко заметить, и в худшем случае ваш посетитель сможет увидеть и прочитать контент, даже если он выглядит немного странно.

В следующем примере вы можете увидеть, что происходит, если overflow установлено в hidden.

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow: hidden;
}

Чтобы определить минимальный размер блока, который будет содержать его содержимое без переполнения, установите свойство width или inline-size блока в значение min-content.

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: min-content;
}

Использование min-content — это один из возможных способов решения проблемы переполнения блоков. Если можно разрешить блоку увеличиться до минимального размера, необходимого для содержимого, но не больше, использование этого ключевого слова даст вам этот размер.

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

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow-wrap: break-word;
}

Альтернативное свойство — word-break. Это свойство разрывает слово в точке переполнения. Оно вызовет разрыв, даже если размещение слова на новой строке позволит отобразить его без разрыва.

В следующем примере вы можете сравнить разницу между этими двумя свойствами на одном текстовом фрагменте.

<div class="box box1">A Very LongWordThatHasNoBreakingPossibilities</div>

<div class="box box2">A Very LongWordThatHasNoBreakingPossibilities</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 30ch;
  margin-block-end: 1em;
}
.box1 {
  word-break: break-all;
}

.box2 {
  overflow-wrap: break-word;
}

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

В примере ниже есть флажок и метка. Допустим, вы хотите разбить метку, если она слишком длинная для поля. Однако вы не хотите, чтобы она разбивалась непосредственно после флажка.

<div class="field">
  <input id="one" type="checkbox" /><label for="one">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>

<div class="field field-br">
  <input id="two" type="checkbox" /><label for="two">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>

.field {
  inline-size: 150px;
  border: 1px solid #ccc;
  margin-block-end: 1em;
  padding: 10px;
}

.field-br {
  word-break: break-all;
}

Чтобы добавить дефисы при разрыве слов, используйте свойство CSS hyphens. Используя значение auto, браузер может автоматически разрывать слова в соответствующих точках дефиса, следуя любым правилам. Чтобы немного контролировать этот процесс, используйте значение manual, а затем вставьте в строку жёсткий (U+2010) или мягкий разрыв (U+00AD). Жёсткий разрыв можно добавить, используя ‐ или ‐, а мягкий разрыв можно добавить, используя ­, ­ или ­ HTML-коды символов. Жёсткий разрыв всегда будет разрывать, даже если это не обязательно. Мягкий разрыв разрывает только если это необходимо.

<div class="box">
  Llanfair&shy;pwllgwyngyll&shy;gogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  inline-size: 150px;
  overflow-wrap: break-word;
  hyphens: manual;
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
}

Вы также можете использовать свойство hyphenate-character, чтобы использовать строку по вашему выбору вместо символа дефиса по умолчанию в конце строки (перед дефисным разрывом) для языка. Значение auto выбирает правильное значение для обозначения разрыва в середине слова в соответствии с типографскими правилами текущего языка содержимого.

CSS предоставляет дополнительный контроль над дефисами: свойство hyphenate-limit-chars можно использовать для определения минимальной длины слова, допускающей дефис, а также минимального количества символов до и после дефиса.

Если вы знаете, где хотите разбить длинную строку, то также можно вставить HTML-элемент <wbr>. Это может быть полезно, например, при отображении длинного URL-адреса на странице. Затем вы можете добавить свойство, чтобы разбить строку в разумных местах, что сделает её более читаемой.

В примере ниже текст разрывается в позиции элемента <wbr>.

<div class="box">
  Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

• Элемент HTML <wbr>
• Свойство CSS word-break
• Свойство CSS overflow-wrap
• Свойство CSS white-space
• Свойство CSS text-wrap
• Свойство CSS hyphens
• Свойство CSS hyphenate-character
• Свойство CSS hyphenate-limit-chars
• Переполнение и потеря данных в CSS