CSS свойство overflow-wrapcss3

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
overflow-wrapcss323.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>
		<h2>Блок со значением overflow-wrap:normal</h2>
		<div class = "test">
			Самое длинное название деревни в Европе:
			<a href =  "https://ru.wikipedia.org/wiki/Лланвайр-Пуллгуингилл" target =  "_blank" title = "Прочитать на Википедии">Лланвайрпуллгуингиллгогерихуирндробуллллантисилиогогого</a>
		</div>
		<h2>Блок со значением overflow-wrap:break-word</h2>
		<div class = "test2">
			Самое длинное название деревни в Европе:
			<a href =  "https://ru.wikipedia.org/wiki/Лланвайр-Пуллгуингилл" target =  "_blank" title = "Прочитать на Википедии">Лланвайрпуллгуингиллгогерихуирндробуллллантисилиогогого</a>
		</div>
	</body>
</html>
Пример использования CSS свойства overflow-wrap(перенос слов в CSS).
Пример использования CSS свойства overflow-wrap(перенос слов в CSS).
CSS свойства