CSS white-space, примеры. Как сделать множественные пробелы в html

Свойство CSS white-space отвечает за управлением пробелами между символами.

Синтаксис CSS white-space

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit;

Где:

normal - обычное отображение, когда множественные пробелы склеиваются в один, а перенос строк делается автоматически (по умолчанию стоит это значение)
nowrap - пробелы склеиваются в один, а перенос строк автоматически не делается
pre - пробелы и перенос строк учитываются. Аналогичен тегу <pre>, но с отличием, что текст может выходить за пределы области
pre-line - аналогично значению pre с отличием, что если текст не помещается в допустимой области, то он переносится автоматически
pre-wrap - пробельные символы учитываются, перенос строк делаются автоматически
inherit - принять значение предка (родителя)

Значение	Перенос текста	Пробелы
normal	Переносится	Не учитываются
nowrap	Не переносится	Не учитываются
pre	Не переносится	Учитываются
pre-line	Переносится	Не учитываются
pre-wrap	Переносится	Учитываются

Примеры с множественными пробелами

Пример 1. Свойство white-space: nowrap

<html>
<head>
<style>
	.primer1{ 
	white-space: nowrap; 
	font-size: 14px;
	width: 200px; 
	border: 1px solid #3A2; 
	padding: 3px; 
	}
</style>
</head>
<body>
	<div class="primer1">Пробелы  склеиваются в один.  Переноса 
	строки нет</div> 
</body>
</html>

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

Пробелы склеиваются в один. Переноса строки нет

Пример 2. Свойство white-space: pre

<html>
<head>
<style>
	.primer2{ 
	white-space: pre; 
	font-size: 14px;
	width: 200px; 
	border: 1px solid #3A2; 
	padding: 3px; 
	}
</style>
</head>
<body>
	<div class="primer2">Пробелы  склеиваются в один. Возможен выход за 
	пределы границы. Перенос строки   учитывается  </div> 
</body>
</html>

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

Пробелы склеиваются в один. Возможен выход за пределы границы. Перенос строки учитывается

Пример 3. Свойство white-space: pre-wrap

<html>
<head>
<style>
	.primer3{ 
	white-space: pre-wrap; 
	font-size: 14px;
	width: 200px; 
	border: 1px solid #3A2; 
	padding: 3px; 
	}
</style>
</head>
<body>
	<div class="primer3">Пробелы  склеиваются в один. Есть автоматический 
	перенос строк. Перенос 
	строки   учитывается  </div> 
</body>
</html>

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

Пробелы склеиваются в один. Есть автоматический перенос строк. Перенос строки учитывается

Для обращения к white-space из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.whiteSpace="VALUE"

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