CSS свойство overflow-wrap указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов).
Свойство word-wrap было переименовано в свойство overflow-wrap в текущей спецификации CSS3 и оно теперь рассматривается как альтернативное название для overflow-wrap, но т.к.
новый синтаксис имеет ограниченную поддержку, рекомендую Вам использовать свойство word-wrap, которое имеет поддержку всеми браузерами.
Допускается переносить слова только в допустимых точках. Это значение по умолчанию.
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 применяется к встроенным элементам, определяя, должен ли браузер вставлять разрывы строк в неразрывную строку, чтобы текст не переполнял ее строку.
Строки могут разрываться только в обычных точках разрыва слов (например, пробел между двумя словами).
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>
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 свойства
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>
(<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.
(