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


184

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

<pre> ... </pre>

или

style="white-space:pre"

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



Вы имеете в виду «теги» или «вкладки»?
user123444555621

2
Есть ли эквивалент, &nbsp;но сделать вкладку?
Хуан Солано

Нет &tab;, но я нашел этот небольшой фрагмент js на github (в основном, нашел и заменил, чтобы создать пять &nbsp;подряд) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
dgig

Ответы:


145

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

&emsp; и &ensp;


113

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

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

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

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

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

Примечание. Обязательно укажите высоту или ширину в пикселях, например, 10 пикселей.
Около

57

Вы можете использовать &nbsp;для пробелов, &lt;для <(меньше, чем номер объекта &#60;) и &gt;для >(больше, чем номер объекта &#62;).

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


44

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

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

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


24

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

В вашем CSS:

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

В вашем HTML:

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

1
Это хороший ответ. Но я просто хотел бы сказать, что было бы лучше использовать класс CSS вместо id (это означает замену #tabна .tabи id="tab"на class="tab"), потому что, если мы используем его более одного раза в одном и том же документе, у нас может быть неопределенное поведение. Смотри, например, этот вопрос .
Хилдер Витор Лима Перейра

Это помогло мне сегодня. Огромное спасибо.
Юстнисар

20

Типы Spacesв HTML

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

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

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

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

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

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


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


6

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

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

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

4

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

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

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

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

Скриншот этого примера кода

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


3

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

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

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


3
Таблицы должны использоваться для представления табличных данных, а не для форматирования. В 90-х годах таблицы часто использовались для форматирования из-за ограничений в HTML и разочарований написанием HTML со стилями, которые работали согласованно во всех браузерах. Сегодня это считается анти-паттерном.
Дэвид Баукум

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

1
Да, но вы можете использовать стиль таблиц (с современным CSS), не нарушая смысловой смысл! дисплей: таблица и т. д.
Julix

3

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

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


1

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

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


1

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


0

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

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

0

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



-2

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

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


1
Я думаю, что вам нужно сформулировать ответ более четко. Вы имеете в виду скопировать и вставить пробел откуда-то? Я не думаю, что это сработало бы здесь.
smilyface

1
В исходном тексте Markdown есть TAB, но здесь нет вывода HTML (вместо этого это один пробел).
Питер Мортенсен
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.