Простір вкладки замість декількох пробілів ("nbsp")?

959

Чи можна вставити символ HTML в HTML, а не вводити  чотири рази?

html

— Рох
джерело

21

Мені здається корисним використовувати <PRE> при використанні табуляції в кілька разів на початку рядка (для початку при запитуванні коду С)

— Гай Ковель

TABХарактер ... робити?

— Мішель де Руйтер

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

— Халед.К

Якщо вам справді потрібні вкладки, спробуйтеwhite-space

— Buksy

6

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

— Сутенер Трізкіт

582

Набагато чистіше використовувати CSS. Спробуйте padding-left:5emабо margin-left:5emзамість цього доречно.

— Alohci
джерело

13

@Alohci Прокладка IMHO за допомогою CSS - це не так добре, оскільки коли ви збільшуєте масштаб тексту у веб-переглядачі, розмір тексту збільшуватиметься, а не AFAIK.

— AlexV

16

@AlexV - Якщо ви використовуєте emяк параметр, як я це робив, він повинен розширюватися на розмір тексту. Навіть якщо ви цього не зробите, це залежатиме від характеру використовуваного механізму збільшення.

— Alohci

2

@DavidThielen - HTML 3, в якому з'явився елемент TAB був нестартовим для розробників браузера, а елемент TAB так і не був реалізований. Натомість був створений HTML 3.2, який був дещо простішим і натомість реалізований.

— Alohci

2

@Eoin - справді. Тобто, чого ви дійсно хочете в цих випадках, це зупинки вкладок . Але про це не запитували ОП. ОП просила про заміну декількох послідовних нерозривних пробілів, які також не вирівнювали б рядки. CSS має tab-sizeвластивість, яку ви дійсно хочете, але підтримка її веб-переглядача була помилковою. Якщо цього не зробити, макет таблиці або, можливо, флексокс - це найкращі ставки.

— Alohci

5

це не відповідає на запитання. відповідь нижче від Крістіана звертається до проблеми, про яку розміщував користувач

— Пранаван Мару

1265

Це залежить від того, який набір символів ви хочете використовувати.

Там немає вкладки об'єкта визначено в ISO-8859-1 HTML - але є кілька пробілів символи, крім  таких , як  , &ensp;, і &emsp;.

В ASCII 	- це вкладка.

Ось повний перелік об’єктів HTML та корисна дискусія пробілів у Вікіпедії .

— Крістіан
джерело

2

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

— Шафізаде

3

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

— Jules Bartow

3

@Shafizadeh Із специфікацій W3 : пробіл - це половина розміру точки, а проміжок em дорівнює розміру точки поточного шрифту. &emsp;трохи більший. Я бачу різницю в Chrome 64 та FireFox 58.

— Дмитро

Шукав цього під час створення великого запиту concat () в MySQL для використання в Crystal Report. ASCII (& # 09;) зробив цю роботу ідеально!

— Майк Д Уейклін

Це те, що я шукав. Я виділив деякі заголовки, використовуючи атрибут виправдання останнього рядка, але я не хочу, щоб деякі з них розпадалися. The & ensp; завадили цьому.

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

237

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

Можливо, вам навіть вдасться відійти від використання символу Unicode (" "), якщо вам пощастить.

Ось список символів «Пробіл» та «пробілів нульової ширини» в Unicode .

— Уілл Робертсон
джерело

195

& emsp; це відповідь.

Однак вони не будуть настільки функціональними, як ви могли очікувати, якщо ви звикли використовувати горизонтальні табуляції в текстових процесорах, наприклад 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>

Розгорніть фрагмент

Запустіть фрагмент вище, щоб побачити наочний приклад.

Додаткова дискусія

У ISO-8859-1 HTML немає визначених об'єктів горизонтальної таблиці, однак доступні деякі інші символи пробілу, ніж звичайні &nbsp;  , &ensp;і вищезгадане &emsp;.

Варто також згадати, що в ASCII та Unicode 	є горизонтальна таблиця.

— WonderWorker
джерело

2

Це не дійсно XHTMLзгідно з валідатором W3

— Buksy

Це лише наполовину вірно, оскільки & emsp; вірно дійсна націнка на W3C. Але ви чітко посилаєтесь на сприятливий приклад CSS. У цьому випадку ми використовуємо власні теги, які є новою розміткою та не є частиною набору W3C. Валідатор W3C суворий до того, що завжди позначає власні теги як помилки. Саме від вас важливіше. Настав час, коли ми отримали гідне офіційне розповсюдження вкладок, доданих до набору Html. Сподіваюсь, це допомагає.

— WonderWorker

2

Я використовував це у випадку для заголовків заголовка 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 році. Коли ви дивитесь на це так, це не дурно.

— ᴛʜᴇᴘᴀᴛᴇʟ

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

— Mani

Це фактично правильна відповідь. Дякую!

— Аріель Монако

67

Спробуйте &emsp;

Це еквівалентно чотирьом  с.

— Абхішек Гель
джерело

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

— le0diaz

52

Дійсно не існує простого способу вставити кілька пробілів всередину (або в середину) абзацу. Ті, хто пропонує вам використовувати CSS, не мають сенсу. Ви, можливо, не завжди намагаєтесь відрізати абзац збоку, але насправді намагаєтесь поставити зайві пробіли у певному місці.

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

А коли немає витонченого способу вставити простору без необхідності покладатися на &emsp;і  тегах, я б сказав , що в результаті код стає набагато більш unreadible , ніж якби була відповідним ім'ям тег , який дозволив би швидко вставляти велику кількість прогалин (або якщо ви, знаєте, місця просто не споживалися в першу чергу).

Оскільки це, як було сказано вище, найкращим варіантом буде використання &emsp;для вставки в потрібне місце.

— GonzoKnight
джерело

1

HTML не був розроблений з самого початку, щоб бути стильним.

— Markus Unterwaditzer

Любіть свою думку про те, як відступ - це не завжди те, чого хочуть люди!

— Програми Redwolf

46

Краще використовувати попередній тег. У попередньо визначає тег відформатований текст.

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

and line breaks.

</pre>

дізнайтеся більше про попередній тег за цим посиланням

— Шрікант Муттаварапу
джерело

1

@HuzaifaSaifuddin, що ти маєш на увазі? <pre>буде стандартизований в HTML5 з таким же поведінкою , як в HTML4.

— Суміт

Я перепрошую , я не знаю Y я писав , що .. Я згоден з тим , ви say..Sorry за неправильну інформацію

— Huzaifa Сайфуддін

Я форматував вихід, який потрібно вставити в електронні таблиці, і це дозволило мені вставити \ t символів, щоб робити вкладки. Однозначно була моя відповідь. Добре йде.

— Крейг Бретт

1

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

— реверпію

41

Я натрапив на це під час пошуку методу, і в кінцевому підсумку з’ясував своє, що, здається, легко працює на те, що потрібно. Я новачок публікую тут, тож сподіваюся, що це працює ... Але майте це в CSS:

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

Тоді у вашому HTML це буде "довга вкладка" в середньому реченні, як мені потрібно:

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

Економія від суми  або &emsp;що вам потрібно.

Сподіваюся, це допомагає комусь, ура!

— Роб
джерело

3

Це додасть 80px зліва та 80px праворуч від spanтегу, а не точно.

— mcont

Все-таки розумна відповідь, оскільки ви лише додаєте невелику розмітку, дозволяючи CSS робити стилізацію.

— інво

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, ви можете використовувати padding або margin. Дивіться модель Box і для Internet Explorer також читайте помилку моделі Internet Explorer .

— rahul
джерело

9

Якщо пробіл стає таким важливим, може бути краще використовувати попередньо відформатований текст та тег <pre>.

— павій
джерело

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

— мангкокорікс
джерело

Дякую!! Це найкраще і найбільш загальне рішення для ситуацій, коли 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; }

Це відступить перший рядок, як у традиційних публікаціях.

— Слєвін
джерело

4

Для цього є простий css:

white-space: pre;

Він зберігає пробіли, які ви додаєте в HTML, а не об'єднує їх.

— Аві
джерело

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.

— Олумід
джерело

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>

Краса цього рішення полягає в тому, що ви можете робити подальші відступи, використовуючи вкладені списки.

Тут Noob розмовляє, тому, якщо є якісь помилки, будь ласка, прокоментуйте.

— funct7
джерело

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

— Nielsvh

1

ми використовуємо нестандартний клас простору

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

Включіть простір класу в CSS.

.space 
{
   margin-left:45px;
}

— rahedcs
джерело

1

Як і у відповіді Alohci, будь ласка, використовуйте em/ remвимірювання, щоб дозволити масштабування тексту браузера.

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

0

Використовуючи CSS та найкращу практику, динамічне створення вкладених меню з відступом буде таким:

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

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

Після тестування символу горизонтальної вкладки 	я виявив, що він не працює як заміна кратного  в описаному нами сценарії. У вас можуть бути різні результати.

— Ро Мак
джерело

0

Це трохи потворне рішення, але ви могли просто зробити це

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

А потім використовуйте змінну вкладки у своїх рядках.

— Аонгус Макговерн
джерело

0

Тільки тег "попереднього":

<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>

Це корисно здебільшого для відображення абзаців тексту, хоча може бути корисним і в інших частинах сценаріїв.

— Ерік А. Туттл
джерело