html.okpython.net
HTML и CSS для начинающих

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

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

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

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

Синтаксис

word-break: normal | break-all | keep-all

Значения

  • normal – строки переносятся как обычно.
  • break-all – если очередное слово не будет полностью помещаться в заданную ширину блока, то браузер будет переносить оставшуюся часть слова на новую строку. Значение не работает для текста на китайском, корейском или японском языке.
  • keep-all – не разрешается перенос строк в словах на китайском, корейском или японском языке. При этом для остальных языков действует как normal.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

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

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

Пример №1