Свойство CSS white-space

Свойство 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"




Читайте также:

• Свойство text-transform

• Свойство text-align

• Свойство vertical-align

• Свойство text-indent

• font-weight

• Свойство font

• Свойство text-decoration

• Как сделать свой курсор в html

• Все про CSS border

• Все про CSS background

• Все про CSS transition


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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.