Css wrap text: overflow-wrap — CSS | MDN

CSS

. narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}
.normal {
  word-break: normal;
}
.breakAll {
  word-break: break-all;
}
.keepAll {
  word-break: keep-all;
}
.breakWord {
  word-break: break-word;
}

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• overflow-wrap

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Обтекание и разрыв текста — CSS: каскадные таблицы стилей

В этом руководстве объясняются различные способы управления переполнением текста в CSS.

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

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

В следующем примере вы можете увидеть, что произойдет, если переполнение установлено на скрытое .

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

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

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

Примечание: Свойство overflow-wrap действует так же, как нестандартное свойство word-wrap . Свойство word-wrap теперь рассматривается браузерами как псевдоним стандартного свойства.

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

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

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

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

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

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

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

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

В приведенном ниже примере текст прерывается на месте .

• Элемент HTML
• Свойство CSS word break
• Свойство CSS overflow-wrap
• Свойство CSS white-space
• Свойство CSS дефисов
• Переполнение и потеря данных в CSS

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 участниками MDN.

overflow-wrap — CSS: Каскадные таблицы стилей

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

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

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

 /* Значения ключевых слов */
перелив: обычный;
overflow-wrap: break-word;
overflow-wrap: везде;
/* Глобальные значения */
overflow-wrap: наследовать;
перелив: начальный;
переполнение: вернуться;
overflow-wrap: обратный слой;
переполнение: не установлено;
 

Свойство overflow-wrap указано как одно ключевое слово, выбранное из списка значений ниже.

Значения

нормальный

Строки могут разрываться только в обычных точках разрыва слов (например, пробел между двумя словами).

везде

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

ключевое слово

То же, что и значение в любом месте , с обычно неразрывными словами, разрешенными для разрыва в произвольных точках, если в строке нет других приемлемых точек разрыва, но возможности мягкого переноса, представленные разрывом слова, НЕ учитываются при расчете минимального содержимого. внутренние размеры.

 overflow-wrap =  
 normal      | 
 ключевое слово | 
 в любом месте 

Сравнение overflow-wrap, word-break и дефисов

В этом примере сравниваются результаты overflow-wrap , word-break и дефис при разбиении длинного слова.

HTML

 

  Говорят, на озере отличная рыбалка.
  Chargoggagoggmanchauggagoggchaubunagungamaugg, однако
  Я никогда не был там сам. (нормальный)


  Говорят, на озере отличная рыбалка.
  Chargoggagoggmanchauggagoggchaubunagungamaugg,
  хотя сам я там никогда не был. (overflow-wrap: везде)


  Говорят, на озере отличная рыбалка.
  Chargoggagoggmanchauggagoggchaubunagungamaugg,
  хотя сам я там никогда не был. (overflow-wrap: break-word)


  Говорят, на озере отличная рыбалка.
  Chargoggagoggmanchauggagoggchaubunagungamaugg,
  хотя сам я там никогда не был. (разрыв слова)


  Говорят, на озере отличная рыбалка.
  Chargoggagoggmanchauggagoggchaubunagungamaugg, однако
  Я никогда не был там сам. (дефисы, без
  атрибут язык)


  Говорят, на озере отличная рыбалка.
  Chargoggagoggmanchauggagoggchaubunagungamaugg, однако
  Я никогда не был там сам.  (дефисы, английские правила)


  Говорят, на озере отличная рыбалка.
  Chargoggagoggmanchauggagoggchaubunagungamaugg, однако
  Я никогда не был там сам. (дефис, немецкие правила)

 

УСБ

 р {
  ширина: 13см;
  поле: 2px;
  фон: золото;
}
.ow-где {
  overflow-wrap: везде;
}
.ow-break-слово {
  overflow-wrap: break-word;
}
.word-break {
  слово-разрыв: разбить все;
}
.дефис {
  дефисы: авто;
}
 

Result

BCD tables only load in the browser with JavaScript enabled. Включите JavaScript для просмотра данных.

• разрыв слова
• дефис
• переполнение текста
• Руководство по переносу и разрыву текста

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.