Html space: 5 Ways to Insert Spaces in HTML

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.

Табл. 1. Перенос текста и пробелы при разных значениях white-space
Значение Перенос текста Пробелы
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> &lt;html&gt; &lt;body&gt; &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt; &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; = Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt; где n — целое число &gt; 2 &lt;/body&gt; &lt;/html&gt; </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. По умолчанию абзацы 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

 
мы можем включить текст, который будет иметь исходное форматирование. То есть он будет принимать все введенные символы. При этом все пробелы, введенные в элементе, будут включены в рендеринг. Кроме того, тег
 содержит значение верхнего и нижнего полей 1em, как и тег 

. Давайте посмотрим на следующий пример:

 
Мой текст. Привет
Мир.

При этом мы можем увидеть результат:

 Мой текст.  Привет
Мир. 

Поэтому мы можем использовать тег

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

Пространство HTML на практике

Как мы видели в этой статье, существует несколько способов использования техники интервалов с использованием самого HTML-кода. Таким образом, как разработчик, вы можете реализовать несколько решений, которые с помощью CSS могут занять гораздо больше времени. Тем не менее, мы рекомендуем вам использовать его с некоторой умеренностью и для действительно необходимых ситуаций, так как это подразумевает большее количество битов в вашем коде. То есть это приведет к увеличению времени рендеринга. Поэтому, в зависимости от необходимости, лучше стилизовать элемент с помощью CSS, чем использовать разрывы строк несколько раз.

Мы также рекомендуем вам создать документ HTML и использовать методы, описанные выше, для практики!

Как создать пространство между строками с помощью CSS?

Наконец, стоит разобраться со свойством line-height, свойством CSS, которое изменяет стандартное HTML-пространство без необходимости изменять поля, отступы или свойства границ. То есть: это свойство способно изменять расстояние между строками. При этом мы можем использовать заранее установленные значения, значения в единицах измерения (таких как px, em и другие), проценты или числовое значение. В следующем примере показаны различные способы использования свойства line-height.

 раздел а {
высота строки: нормальная;
}
div.b {
высота строки: 1,6;
}
div.c {
высота строки: 80%;
}
div.d {
высота строки: 20 пикселей;
} 

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

Как вставлять пробелы/табуляции в текст с помощью HTML/CSS?

Интервал можно добавить с помощью HTML и CSS тремя способами:

Способ 1: Использование специальных символов, предназначенных для разных пробелов

  Объект из символов, используемый для обозначения неразрывного пробела, который является фиксированным пробелом. Это может восприниматься как удвоенное пространство по сравнению с обычным пространством. Он используется для создания пробела в строке, который не может быть разорван переносом слов.

  Объект из символов, используемый для обозначения пробела «en», что означает половину размера текущего шрифта. Это может восприниматься как удвоенное пространство по сравнению с обычным пространством.

  Объект из символов, используемый для обозначения пробела «em», что означает, что он равен размеру пункта текущего шрифта. Это может восприниматься как пространство, в четыре раза превышающее обычное пространство.

Синтаксис:

Обычное пространство:    
Два пробела: 
Четыре пробела: 
 

Example:

< 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 >Это   Четыре пробела. код с двумя пробелами и четырьмя пробелами не виден, вот как он выглядит


Выходные данные:

Способ 2. Использование свойства размера табуляции для установки интервала между символами табуляции

Свойство CSS размера табуляции задает количество пробелов, которые будет отображать каждый символ табуляции. Изменение этого значения позволяет вставить необходимое количество пробелов на один символ табуляции. Однако этот метод работает только с предварительно отформатированным текстом (с использованием тегов

). 

Символ табуляции можно вставить, удерживая клавишу Alt и одновременно нажимая 0 и 9.

Синтаксис:

 .tab {
        размер вкладки: 2;
    }
 

Example:

< html >

< head >

     < title >

         Как вставить пробелы/табуляцию в текст с помощью HTML/CSS?

Титул >

< >

02020202020202020202020202020202020202. 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 >

Output:

Method 3: Creating a new class for spacing с помощью CSS

Можно создать новый класс, который задает определенный интервал, используя свойство margin-left. Объем пространства может быть задан количеством пикселей, указанным в этом свойстве.

Для свойства отображения также установлено значение «inline-block», чтобы после элемента не добавлялся разрыв строки. Это позволяет пространству располагаться рядом с текстом и другими элементами.

Синтаксис:

.tab {
    отображение: встроенный блок;
    поле слева: 40 пикселей;
}
 

Пример:

< HTML >

9 0203 < Head >

< Название >

Как вставить Spaces/Tabs в текст с использованием HTML/CS?

Название >

< Стиль >

0204 дисплей: встроенный блок;

             поле слева: 40 пикселей;

         }

     style >

head >

< body >

     < h2 стиль = "цвет: зеленый" > Geeksforgeeks H2 >

< B > Как надеть пространства/ вкладки в Text с использованием HTML/ CSSS? 2020202020202020202. > > > > > > > > >.

< P > Это A < SPAN КЛАСС = »ВАСА > 903 p >

body >

html >

Output:

HTML is the foundation of webpages , используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений. Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *