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

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
word-wrapcss34.03.510.53.15.512.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.wordWrap = "normal"

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

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

Версия CSS

CSS3

Наследуется

Да.

Анимируемое

Нет.

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

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