Свойство CSS white-space
Свойство white-space определяет, как обрабатывается пробельное пространство внутри элемента. Пробелом может считаться последовательность пробелов или перенос строки.
Это свойство может применяться к любому встроенному содержимому внутри элемента.
Лишние указанные пробелы сворачиваются в один, символы новой строки удаляются, а переносы строк и обтекание происходят там, где это необходимо, чтобы текст поместился в контейнер.
| Начальное значение | normal |
|---|---|
| Применяется к | Элементам уровня строчного содержимого и ячейкам таблиц, а также к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимация | Да. Свойство white-space анимируется. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.whiteSpace = "nowrap"; |
Синтаксис
Синтаксис свойства CSS white-space
css
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;Пример свойства white-space со значением "normal":
Пример свойства CSS white-space со значением normal
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: normal;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Результат
В этом примере текст переносится на следующую строку по мере необходимости.
Пример свойства white-space со значением "nowrap":
Пример свойства CSS white-space со значением nowrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Пример свойства white-space со значением "pre-line":
Пример свойства CSS white-space со значением pre-line
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: pre-line;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>В следующем примере вы можете увидеть разницу между значениями "nowrap", "normal" и "pre-wrap".
Пример свойства white-space с тремя значениями:
Пример свойства CSS white-space со значениями nowrap, normal и pre-wrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.t1 {
white-space: nowrap;
}
p.t2 {
white-space: normal;
}
p.t3 {
white-space: pre-wrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<h3>white-space: nowrap;</h3>
<p class="t1">
Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: normal;</h3>
<p class="t2">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: pre-wrap;</h3>
<p class="t3">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| normal | Переносит строки по мере необходимости для заполнения строчных блоков. Это значение по умолчанию для данного свойства. | Запустить » |
| nowrap | При этом значении текст никогда не будет переноситься на следующую строку. | Запустить » |
| pre | Сохраняет как пробелы, так и переносы строк. Текст не будет переноситься на следующую строку. | Запустить » |
| pre-line | Последовательности пробелов сворачиваются в один пробел. Текст будет переноситься при необходимости, а также на символах переноса строки. | Запустить » |
| pre-wrap | Пробелы сохраняются браузером. Текст будет переноситься при необходимости, а также на символах переноса строки. | Запустить » |
| break-space | Поведение аналогично "pre-wrap", за исключением: - любая последовательность сохранённых пробелов всегда занимает место, включая конец строки - возможность переноса строки существует после каждого сохранённого символа пробела, включая пробелы между символами - такие сохранённые пробелы занимают место и не свисают, тем самым влияя на внутренние размеры блока | |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Practice
Какие свойства имеет значение 'white-space' в CSS?