Пустое пространство CSS - httpdoc.ru

Пустое пространство CSS

Пробелы CSS используются для обработки пробелов внутри элемента. Он определяет, как будет отображаться текст, написанный внутри элемента.


Значения белого пространства

Ценить Описание
обычный Это значение по умолчанию. Текст при необходимости переносится, несколько пробелов превращаются в одно.
болтать Последовательность пробелов превратится в один пробел. Без переноса текста. Строка прерывается только при использовании <br> тега.
предварительно Пробелы сохраняются. Он действует как HTML- <pre> тег. Строки прерываются только в символах новой строки в исходном тексте или в <br> теге.
предварительная линия Несколько пробелов превратятся в одно. Текст разбивается на символы новой строки, на <br> и при необходимости.
предварительная упаковка Пробелы сохраняются. Текст разбивается на символы новой строки, на <br> и при необходимости.
исходный Он устанавливает для этого свойства значение по умолчанию.
наследовать Он наследует свойство от своего родительского элемента.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS White Space </title> 
  <meta charset="UTF-8">
<style>
 p.nowrap {
    white-space: nowrap;
 }

 p.normal {
    white-space: normal;
 }

 p.pre {
    white-space: pre;
 }
</style>
</head>

<body>
<h1>The white-space Property</h1>
<h2>white-space: nowrap:</h2>
<p class="nowrap">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<h2>white-space: normal:</h2>
<p class="normal">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<h2>white-space: pre:</h2>
<p class="pre">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

Выход

CSS White Space

белое пространство: nowrap:

Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то

пробел: нормальный:

Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст.

белое пространство: pre:

Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст. Это какой-то текст.


Поддержка браузера

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
white-space
8.1
1.1
3.5
9,5
3.0