Возможные способы:
<pre> ... </pre>
или
style="white-space:pre"
Что-нибудь еще?
В случаях, когда ширина/высота пространства превышает
, я обычно использую:
Для горизонтальной распорки:
<span style="display:inline-block; width: YOURWIDTH;"></span>
Для вертикальной распорки:
<span style="display:block; height: YOURHEIGHT;"></span>
Вы можете использовать
для пробелов, <
для <
(меньше чем, номер сущности <
) и >
для >
(больше чем, номер сущности >
).
Полный список можно найти в HTML Entities.
Попробуйте & emsp;
.
Согласно документации в Специальные символы :
Объекты символов
& ensp;
и& emsp;
обозначают en space и em пространство соответственно, где en-пространство - это половина размера точки и em пространство равно точечному размеру текущего шрифта. Для фиксированного шага шрифты, пользовательский агент может рассматривать en space как эквивалентный A космический символ и пространство em как эквивалентное двум пространствам персонажи.
Мне нравится использовать это:
В вашем CSS:
.tab {
display:inline-block;
margin-left: 40px;
}
В вашем HTML:
<p>Some Text <span class="tab">Tabbed Text</span></p>
Типы «Пробелов» в HTML
Создает четыре пробела между text- & emsp;
Создает два пробела между текстом - & ensp;
Создает регулярное пространство между текстом - & nbsp;
создает узкое пространство (аналогично регулярному пространству, но небольшая разница -
" & 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 для создания табуляции и интервалов.
Идите дальше, чем @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 > ... & Лт; / тд >
. И, конечно, вы всегда можете контролировать прокладку каждой ячейки таблицы, чтобы регулировать пространство между ними.
Это сделает их выровненными, и они будут выглядеть довольно красиво :)
Альтернативно называемый фиксированным пространством или жестким пространством, неразрывное пространство (NBSP) используется в программировании и обработке текста для создания пространства в строке, которое не может быть разбито оберткой слов.
С помощью HTML & nbsp;
позволяет создавать несколько пробелов, которые видны на веб-странице, а не только в исходном коде.
Вы можете использовать этот код & # 8287;
, чтобы добавить пробел в HTML-контент. Для табуляции используйте его 5 раз и более.
Проверьте пример здесь: https://www.w3schools.com/charsets/tryit.asp?deci = 8287 & ent = ThickSpace
Используйте стандартный CSS tab-size
.
Чтобы вставить символ вкладки (если стандартный ключ вкладки, переместите курсор), нажмите Alt < / kbd > + 0 < / kbd > + 0 > 9 < / kb
`` `css .element { -moz-таб-размер: 4; размер вкладки: 4; }
Мой предпочел:
`` `css
* {-moz-tab-size: 1; размер вкладки: 1;}
Посмотрите на фрагмент или быстро найденный пример в размер вкладки.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
.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:
padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
Это сработало для меня
В моем 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
ответ пользователя 8657661 наиболее близок к моим потребностям (выстраивать вещи по нескольким линиям). Тем не менее, я не мог заставить пример кода работать, как предусмотрено, но мне нужно было изменить его следующим образом:
<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 пикселей справа край экрана).
Вот текст «Табл» (копировать и вставить): «»
Это может показаться другим или не полной вкладкой из-за ограничений ответа этого сайта.