CSS White Space: Best Techniques for Formatting Text

CSS white space это свойство CSS, которое управляет пробельными символами в текстовых элементах HTML. Оно позволяет определить, как браузер должен обрабатывать пробелы между словами и переносы строк в тексте. Всего возможны три значения этого свойства: normal, pre и nowrap.

Normal - это значение по умолчанию. При нем браузер игнорирует повторяющиеся пробелы и переносы строк и объединяет их в один пробел. Кроме того, при этом значении текст переносится автоматически, если он выходит за границы блока.

Пример кода:

html
Этот текст содержит   много   пробелов   и     переносов строк.

css
p {
  white-space: normal;
}

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

Pre - при этом значении, браузер будет сохранять все пробелы, переносы строк и табуляции так, как они написаны в HTML-коде. Это полезно для отображения текста в форматированном виде, например, для отображения кода.

Пример кода:

html
Этот    текст   содержит     много
переносов
и              табуляций.
и              табуляций.

css
pre {
  white-space: pre;
}

При этом значении свойства, весь текст будет отображен точно так, как он написан в HTML-коде, с учетом пробелов, переносов строк и табуляций.

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

Пример кода:

html
Этот текст содержит много символов, и если его разместить в узком блоке, то он будет выходить за его границы и обрываться.

css
p {
  white-space: nowrap;
}

При этом значении свойства, текст будет выводиться на одной строке и обрезаться в конце, если не влезает в ширину блока.

В заключении, свойство CSS white space может быть очень полезно для форматирования текста на странице в соответствии с требованиями дизайна. Оно позволяет управлять пробелами и переносами строк в зависимости от заданных условий и предварительно определенных значений.