white-space ⚡️ HTML и CSS с примерами кода
Свойство white-space устанавливает, как отображать пробелы между словами.
В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre>, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу <pre>, но в отличие от него не меняет шрифт на моноширинный.
Демо
Текст- hanging-punctuation
- hyphens
- letter-spacing
- line-break
- overflow-wrap
- paint-order
- tab-size
- text-align
- text-align-last
- text-indent
- text-justify
- text-size-adjust
- text-transform
- white-space
- word-break
- word-spacing
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис
/* Keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; /* Global values */ white-space: inherit; white-space: initial; white-space: unset;
Значения
normal- Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap- Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление
<br>переносит текст на новую строку. pre- Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
pre-line- В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap- В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.
Значение по-умолчанию: normal
Применяется ко всем элементам
Спецификации
- CSS Text Level 3
- CSS Level 2 (Revision 1)
Описание и примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>white-space</title>
<style>
. example {
border: 1px dashed #634f36; /* Параметры рамки */
background: #fffff5; /* Цвет фона */
font-family: 'Courier New', Courier, monospace; /* Семейство шрифта */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em; /* Отступы */
white-space: pre; /* Учитываются все пробелы и переносы */
}
.exampleTitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Отображать как встроенный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
margin: 0; /* Убираем отступы */
white-space: nowrap; /* Переносов в тексте нет */
}
</style>
</head>
<body>
<p>Пример</p>
<p>
<html>
<body>
<b>Великая теорема Ферма</b><br />
<i
>X <sup><small>n</small></sup> + Y
<sup><small>n</small></sup> = Z
<sup><small>n</small></sup></i
><br />
где n - целое число > 2
</body>
</html>
</p>
</body>
</html>
white-space | WebReference
Свойство white-space устанавливает, как отображать пробелы между словами.
В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre>, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу <pre>, но в отличие от него не меняет шрифт на моноширинный.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrapСинтаксис
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- normal
- Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
- nowrap
- Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br> переносит текст на новую строку.
- pre
- Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
- pre-line
- В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
- pre-wrap
- В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.
Действие значений на текст представлено в табл. 1.
| Значение | Перенос текста | Пробелы |
|---|---|---|
| normal | Переносится | Не учитываются |
| nowrap | Не переносится | Не учитываются |
| pre | Не переносится | Учитываются |
| pre-line | Переносится | Не учитываются |
| pre-wrap | Переносится | Учитываются |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>white-space</title> <style> .
example {
border: 1px dashed #634f36; /* Параметры рамки */
background: #fffff5; /* Цвет фона */
font-family: «Courier New», Courier, monospace; /* Семейство шрифта */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em; /* Отступы */
white-space: pre; /* Учитываются все пробелы и переносы */
}
.exampleTitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Отображать как встроенный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
margin: 0; /* Убираем отступы */
white-space: nowrap; /* Переносов в тексте нет */
}
</style>
</head>
<body>
<p>Пример</p>
<p>
<html>
<body>
<b>Великая теорема Ферма</b><br>
<i>X <sup><small>n</small></sup>
+ Y <sup><small>n</small></sup> =
Z <sup><small>n</small></sup></i><br>
где n — целое число > 2
</body>
</html>
</p>
</body>
</html>
1.Рис. 1. Применение свойства white-space
Объектная модель
Объект.style.whiteSpace
Примечание
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведёт себя как pre-line.
Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
В Firefox для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Text Level 3 | Рабочий проект |
| CSS Level 2 (Revision 1) | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| normal | 5.5 | 12 | 1 | 4 | 1 | 1 |
| pre | 6 | 12 | 1 | 4 | 1 | 1 |
| nowrap | 5. 5 | 12 | 1 | 4 | 1 | 1 |
| pre-wrap | 8 | 12 | 1 | 8 | 3 | 3 |
| pre-line | 8 | 12 | 1 | 9.5 | 3 | 3.5 |
| normal | 1 | 1 | 4 | 1 |
| pre | 1 | 1 | 4 | 1 |
| nowrap | 1 | 1 | 4 | 1 |
| pre-wrap | 1 | 4 | 9 | 3 |
| pre-line | 1 | 4 | 10 | 3 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Текст и шрифт
См. также
- text-overflow
Рецепты
- Как запретить перенос текста?
HTML Space: как включить пробелы непосредственно в HTML
Знаете ли вы, что вы можете включить HTML пробел непосредственно в ваш .html документ без использования CSS ?
В настоящее время CSS3 позволяет вставлять несколько стилей. Таким образом, вы можете контролировать расстояние между любыми элементами HTML.
Однако часто для экономии времени мы можем использовать пробелы в самом HTML. Представьте себе пример, в котором вы просто хотите добавить пробел между строками. Если бы вы использовали CSS, вы могли бы потратить некоторое время на создание этого стиля. Поэтому вы можете сделать это с помощью всего лишь разрыва строки HTML-тега.
Большинству разработчиков также может быть сложно увеличить интервалы в некоторых частях текста, особенно когда они хотят проиллюстрировать код.
Таким образом, с помощью методов пространства HTML вы можете сделать это быстро, используя только один объект.
Поэтому в этой статье вы можете прочитать следующие темы:
- Пробел с тегом HTML
- Неразрывный космический объект
- Пробел с тегом HTML
: разрыв строки - Тег
- Пространство HTML на практике
- Как создать пространство между строками с помощью CSS?
Пробел с тегом HTML
Тег
, это приведет к пробелам между абзацами. То есть: при закрытии тега с
, HTML создает разрыв строки. Тегприносит с собой стандартные характеристики верхнего и нижнего поля в значении 1em, что создает большее расстояние между этим тегом и любым другим элементом.
Это один из основных приемов пространства HTML. Давайте посмотрим на пример ниже: моя строка кода
мой второй абзац
Конечным результатом будет:
моя строка кода
мой второй абзац
Таким образом, просто правильно используя тег, вы сможете правильно отформатировать интервал вашего контента в HTML.
Объект неразрывного пробела
Предположим, внутри элемента вы хотите включить пробел, эквивалентный 4-кратному нажатию клавиши пробела. Тогда было бы необходимо включить четыре пробела между элементами, правильно?
Неправильно. В HTML вы можете включать несколько пробелов между одним словом и другим, но документ будет отображаться только так, как если бы между этими словами был только один пробел. Давайте посмотрим на пример ниже:
Хост Copa.
Конечным результатом будет:
Хост Copa.
Итак, как решить эту проблему в HTML? Что делать, если я хочу включить более одного пробела между словами?
Лучший способ решить эту проблему — использовать сущности.
HTML позволяет вам использовать объекты, представляющие символы или ключи. Среди них есть неразрывный космический объект: . Таким образом, вы можете добавить один или несколько пробелов между словами, просто добавив сущность между ними. Попробуйте повторить предыдущий код, только на этот раз вы можете использовать сущность, ссылающуюся на пробел четыре раза:
Copa Host.
При этом вы можете увидеть результат, как показано ниже:
Copa Host.
При поиске HTML-сущностей вы можете заметить, что существуют другие форматы, которые имеют ту же функцию и представляют ту же сущность.
Есть также два предустановленных объекта, которые добавляют два или четыре пробела: и . Давайте посмотрим на пример ниже:
Copa Host.
Copa Host.
Результатом будет:
Copa Host.
Хозяин Кубка.
Таким образом, этот прием значительно облегчает работу разработчика, даже позволяя использовать правила табуляции, что очень важно для написания кода.
Другие объекты HTML можно увидеть в официальной документации W3C.
Пробел с тегом HTML
: разрыв строки
Ранее мы видели, что между абзацами выполняется разрыв строки.
Но как добавить к этому разрыву одну или несколько строк? Для этого достаточно использовать тег
, что означает разрыв. При этом мы можем включить столько разрывов строк, сколько захотим между абзацами или словами.
Поэтому этот метод широко используется для создания пробела непосредственно в HTML-коде без необходимости его стилизации в CSS.
Вы можете разбивать строки между любыми элементами, а не только между абзацами, например . Другой важной особенностью тега break является то, что он не имеет характеристик поля. Следовательно, он действует иначе, чем разрыв строки тега . То есть с ним вы можете использовать другой способ форматирования вашего контента. Давайте рассмотрим следующий пример: Как вставить Таким образом, вы получите следующий результат: Как вставить Как объяснялось ранее, мы можем применить столько разрывов, сколько захотим. Таким образом, мы можем создать больший интервал. Давайте посмотрим на пример ниже: Давайте вставим В этом примере мы можем получить следующий результат: Давайте вставьте три разрыва строки. С помощью тега HTML . Давайте посмотрим на следующий пример: При этом мы можем увидеть результат: Поэтому мы можем использовать тег Как мы видели в этой статье, существует несколько способов использования техники интервалов с использованием самого HTML-кода. Таким образом, как разработчик, вы можете реализовать несколько решений, которые с помощью CSS могут занять гораздо больше времени. Тем не менее, мы рекомендуем вам использовать его с некоторой умеренностью и для действительно необходимых ситуаций, так как это подразумевает большее количество битов в вашем коде. То есть это приведет к увеличению времени рендеринга. Поэтому, в зависимости от необходимости, лучше стилизовать элемент с помощью CSS, чем использовать разрывы строк несколько раз. Мы также рекомендуем вам создать документ HTML и использовать методы, описанные выше, для практики! Наконец, стоит разобраться со свойством line-height, свойством CSS, которое изменяет стандартное HTML-пространство без необходимости изменять поля, отступы или свойства границ. Кроме того, вы также можете получить доступ к официальной документации W3C, чтобы узнать о других возможностях этого свойства. Интервал можно добавить с помощью HTML и CSS тремя способами: Способ 1: Использование специальных символов, предназначенных для разных пробелов Объект из символов, используемый для обозначения неразрывного пробела, который является фиксированным пробелом. Это может восприниматься как удвоенное пространство по сравнению с обычным пространством. Объект из символов, используемый для обозначения пробела «en», что означает половину размера текущего шрифта. Это может восприниматься как удвоенное пространство по сравнению с обычным пространством. Объект из символов, используемый для обозначения пробела «em», что означает, что он равен размеру пункта текущего шрифта. Это может восприниматься как пространство, в четыре раза превышающее обычное пространство. Синтаксис: Example: Способ 2. Использование свойства размера табуляции для установки интервала между символами табуляции Свойство CSS размера табуляции задает количество пробелов, которые будет отображать каждый символ табуляции. Изменение этого значения позволяет вставить необходимое количество пробелов на один символ табуляции. Однако этот метод работает только с предварительно отформатированным текстом (с использованием тегов Символ табуляции можно вставить, удерживая клавишу Alt и одновременно нажимая 0 и 9. Синтаксис: Example: 02020202020202020202020202020202020202. Output: Method 3: Creating a new class for spacing с помощью CSS Можно создать новый класс, который задает определенный интервал, используя свойство margin-left. Объем пространства может быть задан количеством пикселей, указанным в этом свойстве. Для свойства отображения также установлено значение «inline-block», чтобы после элемента не добавлялся разрыв строки. Это позволяет пространству располагаться рядом с текстом и другими элементами. Синтаксис: Пример: 9 0204 Output: HTML is the foundation of webpages , используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений. Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML. CSS является основой веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS.
разрыв строки
разрыв строки
трехстрочный разрыв. Тег
мы можем включить текст, который будет иметь исходное форматирование. То есть он будет принимать все введенные символы. При этом все пробелы, введенные в элементе, будут включены в рендеринг. Кроме того, тег содержит значение верхнего и нижнего полей 1em, как и тег
Мой текст. Привет
Мир.
Мой текст.
Привет
Мир.
, чтобы упростить его, особенно когда мы хотим использовать вкладки, например: при написании кодов.
Пространство HTML на практике
Как создать пространство между строками с помощью CSS?
То есть: это свойство способно изменять расстояние между строками. При этом мы можем использовать заранее установленные значения, значения в единицах измерения (таких как px, em и другие), проценты или числовое значение. В следующем примере показаны различные способы использования свойства line-height. раздел а {
высота строки: нормальная;
}
div.b {
высота строки: 1,6;
}
div.c {
высота строки: 80%;
}
div.d {
высота строки: 20 пикселей;
} Как вставлять пробелы/табуляции в текст с помощью HTML/CSS?
Он используется для создания пробела в строке, который не может быть разорван переносом слов.
Обычное пространство:
Два пробела:
Четыре пробела:
< html > < head > < title > Как вставить пробелы/табуляцию в текст с помощью HTML/CSS? title > head > < body > < h2 style = "цвет: зеленый" >Гики для гиков h2 > < b >How to insert spaces/tabs in text using HTML/CSS? b > < p >Это обычный пробел.
p > < p >Это два пробела. p > < p >Это Четыре пробела. код с двумя пробелами и четырьмя пробелами не виден, вот как он выглядит
Выходные данные: ).
.tab {
размер вкладки: 2;
}
< html > < head > < title > Как вставить пробелы/табуляцию в текст с помощью HTML/CSS? Титул > < > 
1920202020202020202. . . } .tab2 { Вмещайте: 4; } .tab4 { Вмещайте: 8; } style > head > < body > < h2 style = "color: green" >GeeksforGeeks h2 > < b >How to insert spaces/ Вкладки в тексте с использованием HTML/ CSS? B > < Pre Класс = "0204 >This is a tab with 2 spaces.
pre > < pre class = "tab2" >This is a tab with 4 spaces . Pre > < Pre Класс = "Tab4" > Это TAB с 8 Spaces. .0203 > body > html > 
.tab {
отображение: встроенный блок;
поле слева: 40 пикселей;
}
< HTML > 0203 < Head > < Название > Как вставить Spaces/Tabs в текст с использованием HTML/CS? Название > < Стиль > дисплей: встроенный блок; поле слева: 40 пикселей; } style > head > < body > < h2 стиль = "цвет: зеленый" > Geeksforgeeks H2 > < B > Как надеть пространства/ вкладки в Text с использованием HTML/ CSSS? 2020202020202020202.
> > > > > > > > >. < P > Это A < SPAN КЛАСС = »ВАСА > 903 p > body > html > 