CSS Пробелы между словами

Свойство white-space – позволяет установить тип обработки пробелов. По умолчанию несколько пробелов подряд выводятся в окне Web - браузера как один пробел.

Свойство имеет следующие значения:

normal – Последовательности пробелов объединяются в один пробел, текст выводится стандартным образом.

<p style="white-space: normal">
Строка          1
Строка 2
</p>

pre – Сохраняется вся последовательность пробелов и переносы строк, как они указаны в редакторе.

<p style="white-space: pre">
Строка          1
Строка 2
</p>

nowrap – Объединяет последовательность пробелов в один пробел, как значение normal. Если внутри строки содержится тег <br> , то он вставляет перенос строк .

<p style="white-space: nowrap">
Строка          1
Строка 2<br>
Строка 3
</p>

pre-wrap – Последовательности пробелов сохраняются, как они указаны в редакторе. Строки переносятся только там, указаны элементы <br>.

<p style="white-space: pre-wrap">
Строка          1
Строка 2<br>
Строка 3
</p>

pre-line – Последовательности пробелов объединяются в один пробел. Строки разбиваются с помощью тега <br>, необходимы для заполнения маленьких строчных боксов .

<p style="white-space: pre-line">
Строка          1
Строка 2<br>
Строка 3
</p>

break-spaces – Поведение идентично pre-wrap за исключением того, что:

Любая последовательность сохраненных пробелов или других разделителей пробелов всегда занимает место, в том числе в конце строки.

Возможность разрыва строки существует после каждого сохраненного символа пробела и после каждого другого разделителя пробелов (в том числе между соседними пробелами).

Таблица указано различных значений свойств white-space

Значения	Новые строки	Пробелы и табуляция	Перенос текста по словам	Пробелы в конце строки
normal	Объединяются в одну	Объединяются в один пробел	Переносится	Удаляются
nowrap	Объединяются в одну	Объединяются в один пробел	Не переносится	Удаляются
pre	Сохраняются как в источнике	Сохраняются как в источнике	Не переносится	Сохраняются как в источнике
pre-wrap	Сохраняются как в источнике	Сохраняются как в источнике	Переносится	Остаются
pre-line	Сохраняются как в источнике	Объединяются в один пробел	Переносится	Удаляются
break-spaces	Сохраняются как в источнике	Сохраняются как в источнике	Переносится	Переносится

Пример:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Пробелы между словами</title>
    <style type="text/css">
    @media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 { 
   color: blue; 
}
.capitalize   {
	text-transform: capitalize;}
.uppercase   {
	text-transform: uppercase;}
.lowercase   {
	text-transform: lowercase;}
.none   {
	text-transform: none;}	
</style>
  </head>
  <body>
    <h1>Пробелы между словами</h1>
    <h2 class="capitalize">capitalize: заголовок из нескольких слов</h2>
    <h2 class="uppercase">uppercase:заголовок в верхнем регистре</h2>
    <h2 class="lowercase">lowercase:ЗАГОЛОВОК В НИЖНЕМ РЕГИСТРЕ</h2>
    <h2 class="none">none:Заголовок без преобразования.</h2>
  </body>
</html>

Открыть пример в новом окне

Пробелы между словами

Рекомендуемые материалы:

Спецификации: