Overflow css wrap: overflow-wrap — CSS: Cascading Style Sheets

Свойство overflow-wrap | CSS справочник

CSS свойства

Определение и применение

CSS свойство overflow-wrap указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов).

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

Поддержка браузерами

Свойство
Chrome

Firefox

Opera

Safari

IExplorer

Edge
overflow-wrap23.0*Нет*12.17.0Нет* CSS cинтаксис:

overflow-wrap:"normal | break-word | initial | inherit";

JavaScript cинтаксис:

object.style.overflowWrap = "normal"

Значения свойства

ЗначениеОписание
normalДопускается переносить слова только в допустимых точках. Это значение по умолчанию.
break-wordУказывает, что слово может быть прервано в произвольный месте, если нет допустимой точки для разрыва.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример переноса слов в CSS(свойство overflow-wrap)</title>
<style> 
.test {
width: 300px; /* устанавливаем ширину блока */
overflow-wrap: normal;  /* допускается переносить слова только в допустимых точках (значение по умолчанию) */
background: azure;  /* устанавливаем цвет заднего фона */
border: 1px solid gray;  /* устанавливаем сплошную границу размером 1 пиксель серого цвета */
} 
. test2
{ width: 300px; /* устанавливаем ширину блока */ overflow-wrap: normal; /* слово может быть прервано в произвольный месте, если нет допустимой точки для разрыва */ background: azure; /* устанавливаем цвет заднего фона */ border: 1px solid gray; /* устанавливаем сплошную границу размером 1 пиксель серого цвета */ } </style> </head> <body> <h3>Блок со значением overflow-wrap:normal</h3> <div class = "test"> Самое длинное название деревни в Европе: <a href = "https://ru.wikipedia.org/wiki/Лланвайр-Пуллгуингилл" target = "_blank" title = "Прочитать на Википедии">Лланвайрпуллгуингиллгогерихуирндробуллллантисилиогогого</a> </div> <h3>Блок со значением overflow-wrap:break-word</h3> <div class = "test2"> Самое длинное название деревни в Европе: <a href = "https://ru.wikipedia.org/wiki/Лланвайр-Пуллгуингилл" target = "_blank" title = "Прочитать на Википедии">Лланвайрпуллгуингиллгогерихуирндробуллллантисилиогогого</a> </div> </body> </html>
Пример использования CSS свойства overflow-wrap(перенос слов в CSS). CSS свойства

wrap | HTML и CSS с примерами кода

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

Текст
  • hanging-punctuation
  • hyphens
  • letter-spacing
  • line-break
  • overflow-wrap
  • paint-order
  • tab-size
  • text-align
  • text-align-last
  • text-indent
  • text-justify
  • text-size-adjust
  • text-transform
  • white-space
  • word-break
  • word-spacing
  • letter-spacing
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration-skip
  • text-decoration-skip-ink
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-indent
  • text-rendering
  • text-shadow
  • text-underline-position
  • text-transform
  • white-space
  • word-spacing

Синтаксис

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

Значения

normal
Строки могут разрываться только в обычных точках разрыва слов (например, пробел между двумя словами).
anywhere
Во избежание переполнения неразрывная строка символов — например, длинное слово или URL-адрес — может быть разбита в любой точке, если в строке нет других приемлемых точек разрыва. В точке останова символ переноса не вставляется. Возможности мягкого переноса, представленные разрывом слов, учитываются при расчете собственных размеров минимального содержимого.
break-word
То же самое, что и в любом месте, с обычно неразрывными словами, которые можно разбивать в произвольных точках, если в строке нет других приемлемых точек разрыва, но возможности мягкого переноса, представленные разрывом слова, НЕ учитываются при вычислении внутренних размеров минимального содержимого.

Спецификация

  • CSS Text Module Level 3

Пример

HTMLCSSРезультат

<p>
  They say the fishing is excellent at Lake
  <em
    >Chargoggagoggmanchauggagoggchaubunagungamaugg</em
  >, though I've never been there myself. 
  (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em
    >Chargoggagoggmanchauggagoggchaubunagungamaugg</em
  >, though I've never been there myself. (<code
    >overflow-wrap: anywhere</code
  >)
</p>
<p>
  They say the fishing is excellent at Lake
  <em
    >Chargoggagoggmanchauggagoggchaubunagungamaugg</em
  >, though I've never been there myself. (<code
    >overflow-wrap: break-word</code
  >)
</p>
<p>
  They say the fishing is excellent at Lake
  <em
    >Chargoggagoggmanchauggagoggchaubunagungamaugg</em
  >, though I've never been there myself.
  (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em
    >Chargoggagoggmanchauggagoggchaubunagungamaugg</em
  >, though I've never been there myself.
  (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em
    >Chargoggagoggmanchauggagoggchaubunagungamaugg</em
  >, though I've never been there myself.
(<code>hyphens</code>, English rules) </p> <p lang="de"> They say the fishing is excellent at Lake <em >Chargoggagoggmanchauggagoggchaubunagungamaugg</em >, though I've never been there myself. (<code>hyphens</code>, German rules) </p>
p {
  width: 13em;
  margin: 2px;
  background: gold;
}
.ow-anywhere {
  overflow-wrap: anywhere;
}
.ow-break-word {
  overflow-wrap: break-word;
}
.word-break {
  word-break: break-all;
}
.hyphens {
  hyphens: auto;
}

См. также

  • word-break
  • hyphens
  • text-overflow

Ссылки

  • overflow-wrap 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-адрес, может быть разорвана в любой точке, если в строке нет других допустимых точек разрыва. В точке останова не вставляется символ дефиса. Возможности мягкого переноса, представленные разрывом слова, учитываются при расчете внутренних размеров минимального содержимого.

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

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

Исходное значение нормальный
Applies to non-replaced inline elements
Inherited
yes
Computed value as specified
Animation type discrete
 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, однако Я никогда не был там сам. (дефис, немецкие правила)

CSS
 р {
  ширина: 13см;
  поле: 2px;
  фон: золото;
}
.ow-где {
  overflow-wrap: везде;
}
.ow-break-слово {
  overflow-wrap: break-word;
}
.word-break {
  слово-разрыв: разбить все;
}
.дефис {
  дефисы: авто;
}
 
Result
Specification
CSS Text Module Level 3
# overflow-wrap-property

BCD tables only load in the browser

with JavaScript enabled. Включите JavaScript для просмотра данных.
  • с разрывом слова
  • дефис
  • переполнение текста
  • Руководство по переносу и разрыву текста

Последнее изменение:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *