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

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

<pre> ... </pre>

или

style="white-space:pre"

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

Ответ 1

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

&emsp; и &ensp;

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Ответ 4

Попробуйте &emsp;.

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

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

Ответ 5

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

В вашем CSS:

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

В вашем HTML:

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

Ответ 6

Типы Spaces в HTML

Создает четыре пробела между text- &emsp;

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

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

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

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

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

Ответ 7

<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 для создания вкладок и пробелов для получения дополнительной информации.

Ответ 8

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

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

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

Ответ 9

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

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

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

Ответ 10

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

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

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

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

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

Используйте стандартный 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>

Ответ 14

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

В моем 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

Ответ 15

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 пикселей от правого края экрана).

Ответ 16

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

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

Ответ 17

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

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