КодSEOБлогИное

Пробел HTML

Что такое пробел

Пробел — промежуток в тексте, призванный обозначить границы слов. Пробел между словами печатает самая длинная кнопка на клавиатуре Space

1 2 3 4 5 6 7 8 9 0 - = Backspace Tab Caps Lock Shift Ctrl Win Alt Enter Shift Alt Gr Ctrl Ё Й Ц У К Е Н Г Ш Щ З Х Ъ Ф Ы В А П Р О Л Д Ж Э \ Я Ч С М И Т Ь Б Ю . Q W E R T Y U I O P { } A S D F G H J K L : " | Z X C V B N M < > ?

Символ пробела и его виды

Полный список: Whitespace character [wikipedia.org]
Образец Код
(копируется при щелчке) 		Описание
слово слово &#32; межсловный, его печатает кнопка Space
слово слово &nbsp; межсловный, неразрывный
слово слово &thinsp; тонкий
слово слово &#8239; тонкий, неразрывный
слово слово &hairsp; волосяной
слово​слово &#8203; без ширины, при необходимости переносит слово [применение]
слово­слово &shy; без ширины, при необходимости переносит слово, добавляя к нему дефис
слово⁠слово &NoBreak; без ширины, неразрывный
слово слово &emsp; равен 1em, то есть размеру кегеля
слово слово &numsp; равен ширине цифры, если все цифры одинаковой ширины, неразрывный
слово слово &puncsp; равен ширине запятой
слово слово &#9; горизонтальный Tab
слово␣слово &blank; обозначение символа пробела

Неразрывный пробел, в т. ч. &nbsp;

Неразрывный пробел — это пробел, запрещающий переносить отдельно друг от друга элементы, между которыми он находится. 

<p>Этопредложениенеразбитопословамиегонельзяперенестинановуюстрокупословам
<p>Это&nbsp;предложение&nbsp;разбито&nbsp;по&nbsp;словам&nbsp;и&nbsp;его&nbsp;нельзя&nbsp;перенести&nbsp;на&nbsp;новую&nbsp;строку&nbsp;по&nbsp;словам
<p>Это предложение разбито по словам и его можно перенести на новую строку по словам

Согласно техническим правилам набора текста не допускается при переносе на новую строку отделять или разделять:

Приведен не полный перечень.
Образец Код Описание
А. С. Пушкин А.&nbsp;С.&nbsp;Пушкин инициалы от фамилии
и т. д. и&nbsp;т.&nbsp;д. сокращения типа «и т. п.», «и др.», «т. е.», «т. о.»
г. Москва г.&nbsp;Москва сокращенные слова от слов, к которым они относятся и без которых, как правило, не употребляются (например, «тов.», «им.», «ул.»)
1 000 1&#8239;000 цифры одного числа
XXI век XXI&nbsp;век цифры от наименований
№ 1 №&nbsp;1 знаки {%, §, ° и т. п.) от цифр, к которым они относятся

Длинный пробел

Длина пробела определяется свойством word-spacing. 

<style>
p.wordSpacing {
  word-spacing: 2.5em;
}
</style>

<p>Слово слово слово
<p class="wordSpacing">Слово слово слово

Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Управлять этим поведением можно с помощью свойства white-space. У тега <pre> по умолчанию white-space имеет значение pre и моноширинный шрифт. 

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

<p>Слово          слово          слово
<p>Слово &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;слово &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;слово
<p class="whiteSpace">Слово          слово          слово
<pre>Слово          слово          слово</pre>

Если строка начинается с пробелов, которые не являются неразрывными, то они игнорируются. Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent. 

<style>
p.textIndent {
  text-indent: 2.5em;
}
</style>

<p>          Cлово слово слово
<p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Cлово слово слово
<p class="textIndent">Cлово слово слово

C несколькими следующими друг за другом &nbsp;:

  1. код менее читабельный,
  2. код сложнее корректировать,
  3. код больше, чем при использовании свойств CSS.

Табуляция &#9; в HTML

Табуляция — это символ пробела, который может сужаться или растягиваться дабы выровнять текст в строках. Табуляцию, как правило, печатает кнопка клавиатуры Tab. В HTML обозначается символом &#9;

Действие табуляции можно увидеть, лишь когда свойство white-space имеет значения pre или pre-wrap. У тега <pre> по умолчанию white-space: pre; и моноширинный шрифт. 

<style>
.whiteSpace {
  white-space: pre-wrap;
}
</style>

<div class="whiteSpace">
Длиннющее слово         9 пробелов
Очень длинное слово    4 пробела
Слово                              30 пробелов
</div>
<div class="whiteSpace">
Длиннющее слово&#9;1 пробел
Очень длинное слово&#9;1 пробел
Слово&#9;&#9;&#9;&#9;4 пробела
</div>

Большое число табуляции следует применять с осторожностью, так как при уменьшении ширины всё расплывается. Доработанный вариант выглядит так. 

<style>
div {
  max-width: 50em;
  margin: 0 auto;
  padding: 1em;
  white-space: pre-wrap;
  background: whitesmoke;
}
span {
  border-bottom: 1px dotted #999;
}
<style>

<div>ЧАСТЬ ПЕРВАЯ <span>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</span>3
Глава 1. Никогда не разговаривайте с неизвестными <span>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</span>5
Глава 2. Понтий Пилат <span>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</span>21
Глава 3. Седьмое доказательство <span>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</span>52
Глава 4. Погоня <span>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</span>58
Глава 5. Было дело в Грибоедове <span>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</span>67
Глава 6. Шизофрения, как было и сказано<span>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</span>82
</div>

tab-size

ширина символа табуляции. Целое число без единицы измерения определяет количество пробелов в табе
8
наследует значение родителя
наследует значение родителя
Слово слово слово
<style>
div {
  tab-size: 8; /* свойство tab-size наследуется, применяется к блочным элементам */ 
  white-space: pre-wrap;
}
</style>

<div>Слово&#9;слово&#9;слово</div>

Способ применения неразрывного пробела без ширины &NoBreak;

Скрипт меняет сочетание символов на картинку или что-то иное (см. Вайбер, WhatsApp и т. п.). Можно обойти действие скрипта, поместив между ними знак неразрывного пробела без ширины.

☺
:) замена произойдёт
:&NoBreak;) замены не произойдёт
◄▲►
Все комментарии