Пробел вместо нескольких неразрывных пробелов («nbsp»)?

959

Можно ли вставить символ табуляции в HTML вместо  четырехкратного ввода ?

html

— Roch
источник

21

Я считаю полезным использовать <PRE> при использовании многократного табуляции в начале строки (для неосторожности при цитировании кода C)

— Гай Ковель

TABХарактер ... делать?

— Мишель де Рюйтер

Вы можете определить свой собственный тег <tab>, а затем использовать JQuery на readyфункцию , чтобы заменить или подушечку их с требуемым количеством эквивалентных пространств.

— Халед.К

Если вам действительно нужны вкладки, попробуйтеwhite-space

— Buksy

6

К вашему сведению - если статический 4x  (или единичный &emsp;) не обрезает его, и вы хотите, чтобы они выстроились в линию до следующего столбца с «4 интервалами», как это может сделать вкладка (что иногда означало бы, что на самом деле это 0, 1 или 2 или 3 пробела в строке) .. как например .. скажем, в некоторых текстовых редакторах .. К сожалению, вы не можете в HTML ... без <table>s ... а также, используя некоторое количество пробелов, чтобы попытаться взломать его ... потребуется фиксированный шрифт .... Я думаю, что большинство проблем лежат между необходимостью фиксированного шрифта и тем, что HTML любит удалять пробелы.

— Тачка Тризкит

583

Гораздо чище использовать CSS. Попробуй padding-left:5emили margin-left:5emуместно вместо этого.

— Alohci
источник

13

@Alohci ИМХО, заполнение с помощью CSS не так хорошо, так как при увеличении текста в браузере размер текста будет увеличиваться, но не отступ для AFAIK.

— AlexV

16

@AlexV - Если вы используете emв качестве измерения, как я, он должен расширяться с размером текста. Даже если вы этого не сделаете, это будет зависеть от характера используемого механизма масштабирования.

— Alohci

2

@DavidThielen - HTML 3, в котором появился элемент TAB, не был начальным для создателей браузера, а элемент TAB никогда не был реализован. Вместо этого был создан HTML 3.2, который был несколько проще и реализован вместо этого.

— Alohci

2

@ Eoin - действительно. То есть то , что вы действительно хотите в этих случаях вкладка останавливается . Но это не то, о чем спрашивал ОП. Оператор запрашивал замену нескольких последовательных неразрывных пробелов, которые также не выровняли бы строки. У CSS есть tab-sizeсвойство, которое вам действительно нужно, но его поддержка браузера была неустойчивой. Если это не удастся, лучшим выбором будет размещение на столе или, может быть, flexbox.

— Алохчи

5

это не отвечает на вопрос. приведенный ниже ответ от Кристиана решает проблему, о которой

— писал

1265

Это зависит от того, какой набор символов вы хотите использовать.

Там нет вкладки объекта определен в ISO-8859-1 HTML - но есть несколько пробельных символы, кроме  таких , как  , &ensp;, и &emsp;.

В ASCII 	есть вкладка.

Вот полный список объектов HTML и полезное обсуждение пробелов в Википедии .

— Kristian
источник

2

Какая разница между &ensp;и &emsp;? Я проверил, оба они имеют одинаковое пространство ..!

— Шафизаде

3

Секрет приготовления соуса & # 09; как HTML-код отображается пробел в виде табуляции. <p style = "display: inline-block; пробел: предварительная переноска;"> & # 09; ¡Muy bien! Таббинг работает для меня на испанском и английском </ p>. бело-пространстве: предварительно; тоже работает. Вы также можете использовать тег «tab» <tab /> вместе с вкладкой CSS :: before Selector :: before {content: "\ 0009";}, но он не отображается как вкладка при выделении, вырезании и вставке ,

— Жюль Бартоу

3

@Shafizadeh Из спецификаций W3 : пробел en равен половине размера точки, а пробел em равен размеру точки текущего шрифта. &emsp;немного больше. Я вижу разницу в Chrome 64 и FireFox 58.

— Дмитрий

Искал это при создании большого запроса concat () в MySQL для использования в Crystal Report. ASCII (& # 09;) отлично справился со своей задачей!

— Майк Д Уэйклин,

Это то, что я искал. Я выделил некоторые заголовки, используя атрибут выравнивания последней строки, но я не хочу, чтобы некоторые из них были разделены. & Ensp; помешал этому.

— Алекс Банман

237

Нет, Tab - это просто пробел в отношении HTML. Вместо этого я бы порекомендовал em-пробел, который такой большой (→ | | ←) ... обычно 4 пробела в ширину - и вводится как &emsp;.

Вы могли бы даже быть в состоянии уйти с использованием Unicode символ (» «) для него, если вам повезет.

Вот список символов пробела и «пробелов нулевой ширины» в Юникоде .

— Уилл Робертсон
источник

195

& ЕПРС; это ответ.

Однако они не будут такими функциональными, как вы могли бы ожидать, если вы привыкли использовать горизонтальные табуляции в текстовых процессорах, таких как Word, Wordperfect, Open Office, Wordworth и т. Д. Они имеют фиксированную ширину и не могут быть настроены.

CSS дает вам гораздо больший контроль и предоставляет альтернативу, пока W3C не предоставит официальное решение.

Пример:

padding-left:4em

..или..

margin-left:4em

... как уместно

Это зависит от того, какой набор символов вы хотите использовать.

Вы можете настроить некоторые теги вкладок и использовать их аналогично тому, как вы используете теги h.

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... и использовать их так:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>

Развернуть фрагмент

Запустите фрагмент выше, чтобы увидеть наглядный пример.

Дополнительное обсуждение

В HTML-стандарте ISO-8859-1 не определены объекты горизонтальной табуляции, однако есть некоторые другие символы пробела, отличные от обычных &nbsp, например;  , &ensp;И вышеупомянутый &emsp;.

Также стоит упомянуть, что в ASCII и Unicode 	есть горизонтальная табуляция.

— Чудотворец
источник

2

Это недействительно в XHTMLсоответствии с валидатором W3

— Букси

Это только наполовину правда, так как & emsp; верно действительная наценка W3C. Но вы явно ссылаетесь на благоприятный пример CSS. В этом случае мы используем пользовательские теги, которые являются новой разметкой и не являются частью набора W3C. Валидатор W3C строго следит за тем, чтобы всегда отмечать пользовательские теги как ошибки. Это зависит от вас, что является более важным. Пришло время получить официальное одобрение вкладок, добавленных в набор разметки HTML. Надеюсь это поможет.

— WonderWorker

2

Я использовал это в случае с заголовками Swing JTable со значением String и символом типа стрелки HTML, где мне понадобился этот символ в качестве разделителя. Работает отлично! Спасибо!

— Блейк Нил

2

«Как ни странно, в html нет горизонтальной вкладки» Не все так странно, поскольку форматирование последовательно отходит от html и в css, а вкладка - это не визуальный элемент, а только элемент форматирования, но хороший ответ и хорошо объясненный

— MikeT

75

Ниже приведены 3 различных способа, предоставляемых HTML для вставки пустого пространства.

Введите,  чтобы добавить один пробел.
Введите, &ensp;чтобы добавить 2 пробела.
Введите, &emsp;чтобы добавить 4 пробела.

— sanjeev51
источник

3

Просто добавь ;к ним тоже. Нравится 

— Amio.io

2

Этот ответ фактически отвечает на вопрос. Это глупо, потому что ответ CSS помечен как ответ.

— Мани

@Mani Вопрос был задан в 2009 году, а принятый ответ - с 2009 года. Этот ответ был добавлен в 2018 году. Когда вы смотрите на это таким образом, это не глупо.

— августа

@ ᴛʜᴇᴘᴀᴛᴇʟ Забудьте, если это действительно отвечает на вопрос или нет, но отмеченный не дает точного ответа - это то, что я пытаюсь сделать.

— Мани,

Это фактический правильный ответ. Спасибо!

— Ариэль Монако

67

Пытаться &emsp;

Это эквивалентно четырем  с.

— Абхишек Гоэль
источник

На самом деле это не правильный ответ, как w3.org/MarkUp/html3/specialchars.html . ясно говорит, что это зависит от типа используемого шрифта, также пробел em равен размеру точки текущего шрифта, а пробел em эквивалентен двум пробелам

— le0diaz

52

На самом деле не существует простого способа вставить несколько пробелов внутри (или в середине) абзаца. Те, кто предлагает использовать CSS, упускают суть. Возможно, вы не всегда пытаетесь сделать отступ абзацу сбоку, но на самом деле пытаетесь поставить дополнительные пробелы в определенном месте.

По сути, в этом случае пространства становятся содержанием, а не стилем. Я не знаю, почему так много людей этого не видят. Я предполагаю жесткость, с которой они пытаются обеспечить разделение стиля и правила контента (HTML был спроектирован, чтобы делать и то, и другое с самого начала - нет ничего плохого в том, чтобы иногда определять стиль уникального элемента, используя соответствующие теги, не тратя намного больше время на создание таблиц стилей CSS и абсолютно ничего не читаемого об этом, когда он используется в модерации. Есть также что-то, что можно сказать, чтобы быть в состоянии сделать что-то быстро.) означает, что они могут рассматривать только пробельные символы как используемые только для стиль и отступ.

И когда нет изящного способа вставки пробелов без необходимости полагаться на теги &emsp;и  теги, я бы сказал, что полученный код становится гораздо более нечитаемым, чем если бы существовал тег с соответствующим именем, который позволил бы вам быстро вставить большое количество пробелов. (или, если вы знаете, места не были израсходованы в первую очередь).

Однако, как было сказано выше, лучше всего использовать &emsp;для вставки в правильном месте.

— GonzoKnight
источник

1

HTML с самого начала не разрабатывался для индивидуального оформления.

— Маркус Унтервадитцер

Любите ваше мнение о том, что отступы не всегда то, что люди хотят!

— Программы Redwolf

46

Лучше использовать предварительный тег. В предварительно определяет тег отформатирован текст.

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

узнать больше о предварительной метке по этой ссылке

— Срикант Муттаварапу
источник

1

@HuzaifaSaifuddin что ты имеешь ввиду? <pre>будет стандартизирован в HTML5 с таким же поведением , как в HTML4.

— Sumit

Я извиняюсь, я не знаю, я написал это .. Я согласен с тем, что вы говорите .. Извините за неправильную информацию

— Huzaifa Saifuddin

Я форматировал вывод для вставки в электронные таблицы, и это позволило мне вставить \ t символы для создания табуляции. Определенно был мой ответ. Хорошо идет.

— Крейг Бретт,

1

Это лучший вариант ИМХО. Кроме того, мы можем применить определение стиля к <pre>, чтобы при необходимости иметь правильный моноширинный шрифт. Пример: pre {font-family: "Lucida Console", Monaco, monospace; размер шрифта: 90%; }

— Reverpie

41

Я столкнулся с этим, когда искал метод, и в конечном итоге выяснил, что мне кажется, что он легко работает для того, чего хотел. Я новичок в публикации здесь, поэтому я надеюсь, что это работает ... Но есть это в CSS:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

Тогда в вашем HTML это будет ваша "длинная вкладка" в середине предложения, как мне нужно:

<span class="tab"></span>

Экономит от суммы  или &emsp;что вам нужно.

Надеюсь, это поможет кому-то, ура!

— обкрадывать
источник

3

Это добавит 80px слева и 80px справа от spanтега, не совсем вкладку.

— mcont

Все еще умный ответ, поскольку вы только добавляете небольшую разметку, позволяя CSS делать стилизацию.

— invot

19

&emsp;, &ensp;,  Или  могут быть использованы.

W3 говорит ...

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

Подробнее читайте на W3.org для HTML3

Подробнее на W3.org для HTML4

Еще больше в Википедии

— shyammakwana.me
источник

16

AFAIK, единственный способ использовать

&nbsp;

Если вы можете использовать CSS, то вы можете использовать отступы или поля. См. Box box , а также для Internet Explorer, также прочитайте ошибку в Internet Box box model .

— Рахул
источник

9

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

— pavium
источник

ОП не так уж и специфичен в отношении пробелов, просто спросил о сочетаниях клавиш для нескольких  . Вызов <pre>тега создаст много дополнительной работы.

— изоморфизм

Чтобы избежать моноширинного шрифта, используйте css "white-space: pre-wrap"

— hultqvist

Пробелы не that importantвещь. Это факт жизни.

— Программы Redwolf

9

Если вы хотите сделать отступ в первом предложении абзаца, вы можете сделать это с помощью небольшой хитрости CSS:

p:first-letter {
    margin-left: 5em;
}

— peirix
источник

Да. Это тоже сработает. Просто не забудьте надеть его, :first-letterесли нужно сделать отступ только в первом предложении.

— peirix

9

Тег <tab> никогда не попал в браузеры, несмотря на то, что он был введен в HTML3. Я всегда думал, что это очень жаль, потому что во многих обстоятельствах жизнь была бы намного проще, если бы она была нам доступна. Но вы можете легко исправить это, чтобы получить поддельный тег <tab>. Добавьте следующее в заголовок вашего HTML или еще (без тегов стиля) в ваш CSS:

<style>
    tab { padding-left: 4em; }
</style>

С тех пор, когда вам понадобится вкладка в вашем документе, вставьте туда <tab>. Это не настоящая вкладка, потому что она не выравнивается по меткам табуляции, но она работает для большинства нужд, без необходимости смешиваться с неуклюжими символами или интервалами. Это действительно облегчает проверку вашего источника и позволяет легко форматировать простые вещи, когда вы не хотите переходить к сумме таблиц или других более сложных «решений».

Одним из приятных аспектов этого решения является то, что вы можете выполнить быстрый поиск / замену текстового документа, чтобы заменить все вкладки тегом <tab>.

Возможно, вы сможете определить набор истинных абсолютных позиций вкладок, а затем использовать соответствующую вкладку (например, <tab2> или <tab5> или что-то еще), где это необходимо, но я не нашел способа сделать это без отступа последующих строк ,

— user1388236
источник

7

Вы можете использовать таблицу и применить widthатрибут к первому <td>.

Код:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

Результат

Content1       Content2
Content3       Content4

— mangkokorix
источник

Спасибо!! Это лучшее и наиболее общее решение для ситуаций, когда CSS невозможен.

— Джон Хенкель

6

Я использовал пролет с в стиле линии. Я должен был сделать это, поскольку я обрабатываю строку простого текста, и мне нужно заменить \ t на 4 пробела (appx). Я не мог использовать  как-нибудь дальше в процессе их интерпретации, чтобы в окончательной разметке были пустые пространства.

HTML:

<span style="padding: 0 40px">&nbsp;</span>

Я использовал его в функции PHP, как это:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

— Горди
источник

6

Если вам нужна была только одна вкладка, у меня сработало следующее.

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

с HTML что-то вроде:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

Вы можете добавить больше «вкладок», добавив дополнительные стили «вкладок» и изменив HTML, например:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

с HTML что-то вроде:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

— StrangeDucks
источник

4

Если вы используете CSS, я бы предложил следующее:

p:first-letter { text-indent:1em; }

Это будет отступ первой строки, как в традиционных публикациях.

— Slevin
источник

4

Для этого есть простой CSS:

white-space: pre;

Он сохраняет пробелы, которые вы добавляете в HTML, а не объединяет их.

— Avi
источник

3

<span style="margin-left:64px"></span>

Рассмотрим это так: одна вкладка равна 64 пикселям. Так что это пространство, которое мы можем дать с помощью CSS.

— Матин
источник

3

мы можем использовать style = "white-space: pre" следующим образом:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

пустое пространство внутри заполнено вкладками, количество вкладок зависит от текста.

это будет выглядеть так:

Text    : value
Text2   : value2
Text32  : value32

— Эсги Дендянри
источник

3

Идеальный код CSS, который следует использовать, должен представлять собой сочетание свойств «display» и «min-width» ...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

— Olumide
источник

2

Ну, если вам нужен длинный пробел в начале одной строки только из всего абзаца, то это может быть решением:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

Если это слишком много, чтобы написать или нужно во многих местах такие вкладки, то вы можете сделать это

<span class='tab'>&nbsp;</span>

Затем включите это в CSS:

span.tab {display:inline-block;height:1em;width:4em;}

— Евгений Савельев
источник

2

Я использую список без маркеров, чтобы создать вид «с вкладками». (Это то, что я иногда делаю при использовании MS Word)

В файле CSS:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

А в файле HTML используйте неупорядоченные списки:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

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

Нуб здесь говорит, поэтому, если есть какие-либо ошибки, пожалуйста, прокомментируйте.

— funct7
источник

(x) HTML должен указывать содержание документа, то, как оно отображается, должно обрабатываться CSS. Есть причины, по которым размещение веб-страниц с использованием таблиц никогда не должно использоваться для не табличных данных.

— Нильсвх

1

мы используем пользовательский класс пространства

<span class='space'></span>

Включите космический класс в CSS.

.space 
{
   margin-left:45px;
}

— rashedcs
источник

1

Как и в ответе Алохчи, используйте em/ remизмерения, чтобы увеличить масштаб текста в браузере.

— Чарли Хардинг

0

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

Создайте стиль для каждого вложения, например, indent1, indent2 и т. Д., Причем каждый из них определяет свой собственный левый край. Структура сайта редко должна выходить за рамки трех уровней вложенности.
Используйте статическую переменную (целое число) внутри саморекурсивной функции для отслеживания рекурсии.
Для каждого цикла добавьте номер цикла к слову indent, используя сценарии на стороне сервера, такие как PHP или ASP, чтобы эти меню соответствующим образом форматировались с помощью CSS.

В качестве альтернативы, переберите статическую переменную, чтобы добавить интервал, используя несколько  или<pre> теги, или другие символы, в зависимости от ситуации.

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

— Ро Мак
источник

0

Это немного уродливое решение, но вы могли бы просто сделать это

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

А затем используйте переменную табуляции в ваших строках.

— Аонгус Макговерн
источник

0

Только тег "pre":

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

Вы можете применить любой класс CSS к этому тегу.

— Янни
источник

0

Я бы просто порекомендовал:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>

— Йоав Барни
источник

0

<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Удостоверьтесь, что цветовой код соответствует фону, px изменяется в зависимости от желаемой длины для вкладки.

Затем добавьте свой текст после <t>. </ T>

Точка используется как пробел, и ее легче набирать, но '& # 160;' можно использовать вместо периода, чтобы сделать так, чтобы цветовое кодирование не относилось.

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

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

— Эрик А. Таттл
источник