overflow-wrapСвойство в CSS позволяет указать , что браузер может разорвать строку текста внутри целевого элемента на несколько строк в ином неразрывном месте. Это помогает избежать необычно длинной строки текста, вызывающей проблемы с разметкой из-за переполнения.
.example ( overflow-wrap: break-word; )Значения
normal: по умолчанию. Браузер разбивает строки в соответствии с обычными правилами переноса строк. Слова или непрерывные строки не сломаются, даже если они переполняют контейнер.break-word: слова или строки символов, которые слишком велики, чтобы поместиться в их контейнер, будут разорваны в произвольном месте, чтобы вызвать разрыв строки. Символ дефиса не будет вставлен, даже еслиhyphensсвойство используется.inherit: целевой элемент должен наследовать значениеoverflow-wrapсвойства, определенного для его непосредственного родителя.
В демонстрации ниже есть кнопка переключения, которая позволяет переключаться между normalи break-word.
См. Демонстрацию переноса пером / переноса слов Луи Лазариса (@impressivewebs) на CodePen.
Чтобы продемонстрировать проблему, которую overflow-wrapпытается решить, демонстрация использует необычно длинное слово внутри относительно небольшого контейнера. Когда вы break-wordвключаете, слово разрывается, чтобы уместить небольшой объем доступного пространства, как если бы слово было несколькими словами.
Строка неразрывных пробелов ( ) будет обрабатываться таким же образом и также будет разрываться в подходящем месте.
overflow-wrapполезен при применении к элементам, которые содержат немодерируемый пользовательский контент (например, разделы комментариев). Это может предотвратить нарушение макета веб-страницы длинными URL-адресами и другими непрерывными строками текста (например, вандализмом).
Сходства с word-breakсобственностью
overflow-wrapи word-breakведут себя очень похоже и могут использоваться для решения аналогичных проблем. Краткое описание различий, как объясняется в спецификации CSS:
overflow-wrapобычно используется, чтобы избежать проблем с длинными строками, вызывающими нарушение макета из-за того, что текст выходит за пределы контейнера.word-breakопределяет возможности мягкого переноса между буквами, обычно связанными с такими языками, как китайский, японский и корейский (CJK).
После описания примеров того, как word-breakможно использовать контент CJK, в спецификации говорится: «Чтобы включить дополнительные возможности прерывания только в случае переполнения, см. overflow-wrap«.
Исходя из этого, мы можем предположить, что word-breakэто лучше всего использовать с неанглоязычным контентом, который требует определенных правил разбиения слов, и который может перемежаться с английским контентом, в то время как его overflow-wrapследует использовать, чтобы избежать разбивки макетов из-за длинных строк, независимо от используемого языка. .
Историческая word-wrapсобственность
overflow-wrap- стандартное имя своего предшественника, word-wrapсвойства. word-wrapизначально была проприетарной функцией только для Internet Explorer, которая в конечном итоге стала поддерживаться во всех браузерах, несмотря на то, что не была стандартом.
word-wrapпринимает те же значения overflow-wrapи ведет себя так же. Согласно спецификации, браузеры «должны рассматривать word-wrapкак альтернативное имя overflow-wrapсвойства, как если бы оно было сокращением overflow-wrap«. Кроме того, все пользовательские агенты должны поддерживать word-wrapбессрочную поддержку по устаревшим причинам.
Оба overflow-wrapи word-wrapбудут проходить проверку CSS, если валидатор настроен на проверку на соответствие CSS3 или выше (в настоящее время по умолчанию).
Связанный
- разрыв слова
- дефисы
- белое пространство
- Обработка длинных слов и URL-адресов
Дополнительная информация
- Word-Wrap: свойство CSS3, которое работает в любом браузере
- Обертка переполнения на W3C
- Обсуждение Stack Overflow на
word-breakvs.overflow-wrap
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Указанная выше «частичная» поддержка связана с поддержкой старых браузеров, word-wrapно не из-за этого overflow-wrap. Использование обоих может обеспечить обратную совместимость.
Черновая версия спецификации W3C редактора включает новое значение, называемое break-spacesпоследовательностью «сохраненных» символов пробела. Нет известных браузеров, поддерживающих эту функцию, и она не включена в рабочую черновую версию спецификации.