CSS word-wrap, примеры. Как сделать перенос слов в HTML

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

Синтаксис CSS word-wrap

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

Где:

normal - значение по умолчанию. Если слово не умещается в блок (контейнер), то оно будет вынесено за пределы контейнера
break-word - включает перенос слов, т.е. не будет той ситуации, когда слово вылезет за пределеы отведенной области
inherit - принять значение предка (родителя)

Примеры перенос слов в html

В первом примере перенос слов будет включен, а во втором выключен.

<html>
<head>
<style>
	.primer1{ 
	width: 140px; 
	padding: 3px; 
	word-wrap: break-word;
	border: 1px solid black;;
	}
	.primer2{ 
	width: 140px; 
	padding: 3px; 
	word-wrap: normal;
	border: 1px solid black;;
	}
</style>
</head>
<body>
	<div class="primer1">Пример №1. Включен перенос слов. ДлинноесловоСловоСлово</div> 
	<div class="primer2">Пример №2. Перенос слов выключен. ДлинноесловоСловоСлово</div>
</body>
</html>

Вот как это выглядит на странице:

Пример №1. Включен перенос слов. ДлинноесловоСловоСлово

Пример №2. Перенос слов выключен. ДлинноесловоСловоСлово

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

← Перейти в каталог CSS уроков