Как вставить пробелы / табуляции в текст, используя HTML / CSS

Возможные пути:

<pre> ... </pre>

или

style="white-space:pre"

Что-нибудь еще?

Чтобы вставить tab spaceмежду двумя словами / предложениями я обычно использую

  и  

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

Для горизонтальной прокладки:

<span style="display:inline-block; width: YOURWIDTH;"></span>

Для вертикальной прокладки:

<span style="display:block; height: YOURHEIGHT;"></span>

Вы можете использовать  для пробелов, <для <(меньше, чем номер объекта <) и >для >(больше, чем номер объекта >).

Полный список можно найти на HTML Entities .

Попробуй  .

Согласно документации на специальные символы :

Символьные объекты  и  обозначают пробел en и пробел em соответственно, где пробел en составляет половину размера точки, а пробел em равен размеру точки текущего шрифта. Для шрифтов с фиксированной высотой пользовательский агент может рассматривать пробел en как эквивалент символа пробела A, а пробел em как эквивалент двух символов пробела.

Мне нравится использовать это:

В вашем CSS:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

В вашем HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>

Типы Spacesв HTML

Создает четыре пробела между текстом  

Создает два пробела между текстом -  

Создает регулярное пространство между текстом -  

создает узкое пространство (похоже на обычное пространство, но небольшая разница - "&thinsp";

интервал между предложениями - "</br>"

Эта ссылка может вам помочь. Проверьте [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

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

См. Как использовать HTML и CSS для создания вкладок и интервалов для получения дополнительной информации.

<span style="padding-left:68px;"></span>

Вы также можете использовать:

padding-left
padding-right
padding-top
padding-bottom

Перейдите на шаг дальше, чем @Ivar, и создайте свой собственный пользовательский тег, например, так ... Для меня «вкладка» легче запомнить и напечатать.

tab {
    display: inline-block;
    margin-left: 40px;
}

И реализация HTML ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

И мой скриншот ...

Если вы просите вкладки для выравнивания материала в некоторых строках, вы можете использовать <table>.

Ввод каждой строки <tr> ... </tr>. И каждый элемент внутри этой строки <td> ... </td>. И, конечно, вы всегда можете контролировать заполнение каждой ячейки таблицы, чтобы настроить расстояние между ними.

Это выровняет их, и они будут выглядеть очень красиво :)

Альтернативно, упоминаемый как фиксированный пробел или пробел, неразрывный пробел (NBSP) используется в программировании и обработке текста, чтобы создать пробел в строке, который не может быть разбит переносом слов.

С помощью HTML  позволяет создавать несколько пробелов, видимых на веб-странице, а не только в исходном коде.

Пустое пространство? Не могли бы вы просто использовать прокладку? Это идея. Таким образом, вы можете добавить «пустую область» вокруг вашего элемента. Таким образом, вы можете использовать следующие теги CSS:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

Вы можете использовать этот код  для добавления пробела в контент HTML. Для табуляции используйте 5 или более раз.

Проверьте пример здесь: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Используйте стандартный CSS tab-size.

Чтобы вставить символ табуляции (если стандартная клавиша табуляции, переместите курсор), нажмите Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

Мои предпочтения:

*{-moz-tab-size: 1; tab-size: 1;}

Посмотрите на фрагмент или быстро найденный пример на размер табуляции .

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

Это сработало для меня:

В моем CSS у меня есть:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

Тогда в HTML я просто использую свои вкладки:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

Ответ user8657661 наиболее близок к моим потребностям (выстроить несколько строк). Тем не менее, я не мог заставить пример кода работать как предусмотрено, но мне нужно было изменить его следующим образом:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

Если вам нужны выровненные по правому краю числа, вы можете изменить их left:150pxна right:150px, но вам нужно будет изменить число в зависимости от ширины экрана (как написано, цифры будут располагаться в 150 пикселях от правого края экрана).

Вы можете сделать через заполнение, как <span style="padding-left: 20px;">, вы можете проверить больше способов здесь - пустое место в HTML

Вот текст "Tab" (скопируйте и вставьте): ""

Из-за ограничений ответа на этом сайте он может отображаться по-другому или не полностью.