CSS :: Свойство word-wrap

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

Характеристики

Значение по умолчанию: normal.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.wordWrap="value".

Синтаксис

word-wrap: normal | break-word

Значения

normal – слова могут переноситься на новую строку только целиком, если только перенос не будет задан явно, например, при помощи тега <br>.
break-word – если слово не будет полностью помещаться в заданную ширину блока и будет отсутствовать допустимая точка для разрыва строки вне слова, то браузер будет вставлять разрыв строки внутри слова и переносить оставшуюся часть на новую строку.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-word-wrap

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/word-wrap

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p{
		width: 230px;
		margin: 3em;
		}
		
		.p_1{
		word-wrap: normal;
		background-color: yellow;
		}
		
		.p_2{
		word-wrap: break-word;
		background-color: green;
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		Слова переносятся на новую строку целиком, как обычно короче. 
		Парапапарампрарампарарарарарарарам.
	</p>
	
	<p class="p_2">
		Если слово не помещается в заданные размеры по ширине и 
		отсутствует допустимая точка для разрыва строки вне слова, 
		то его часть переносится на другую строку. 
		Парапапарампрарампарарарарарарарам.
	</p>
	
</body>
</html>

Пример №1