Spacja tabulacji zamiast wielu spacji nietłukących ("nbsp")?

Czy można wstawić znak tabulacji w HTML, zamiast 4 razy wpisywać  ?

 836
html
Author: Paolo Forgia, 2009-10-15
Source

30 answers

Używanie CSS jest dużo czystsze. Spróbuj zamiast tego padding-left:5em LUB margin-left:5em.

 507
Author: Alohci,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-08 12:44:21

To zależy od zestawu znaków, którego chcesz użyć.

Nie ma encji tabulacji zdefiniowanej w ISO-8859-1 HTML-ale istnieje kilka białych znaków innych niż  , takich jak  ,  ,i  .

W ASCII, 	 jest tabulatorem.

Tutaj {[13] } jest pełna lista encji HTML i użyteczna dyskusja o białych spacjach na Wikipedii.

 1185
Author: kristian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-01 00:13:46

Nie, tab to tylko białe spacje, jeśli chodzi o HTML. Polecam zamiast tego spację em, która jest taka duża ( - >  . Możesz nawet być w stanie uciec z pomocą znaku unicode dla niego, jeśli masz szczęście.

 194
Author: Will Robertson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-15 11:07:26

to jest odpowiedź.

Jednak nie będą one tak funkcjonalne, jak można się spodziewać, jeśli jesteś przyzwyczajony do korzystania z poziomych tabulacji w edytorach tekstu, np. Word, WordPerfect, Open Office, wordworth, itp. Mają stałą szerokość i nie można ich dostosować.

CSS daje znacznie większą kontrolę i zapewnia alternatywę, dopóki W3C nie dostarczy oficjalnego rozwiązanie.

Przykład: 

padding-left:4em

..albo..

margin-left:4em

..odpowiednio

To zależy od zestawu znaków, którego chcesz użyć.

Możesz skonfigurować kilka tagów tabulatorów i używać ich w sposób podobny do tego, jak używasz tagów 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>

...i używaj ich tak: 

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

Uruchom powyższy fragment, aby zobaczyć wizualny przykład.

Extra dyskusja

Nie ma tabulacji poziomej encje zdefiniowane w ISO-8859-1 HTML, jednak są dostępne inne znaki spacji niż zwykłe &nbsp, na przykład; &thinsp;, &ensp; i wyżej wymienionych &emsp;.

Warto również wspomnieć, że w ASCII i Unicode, &#09; jest poziomą tabelą.

 169
Author: Knickerless-Noggins,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-18 10:41:32

Spróbuj &emsp;

Jest równoważne czterem &nbsp;s.

 64
Author: Abhishek Goel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-21 10:46:19

Naprawdę nie ma łatwego sposobu wstawiania wielu spacji wewnątrz (lub w środku) akapitu. Ci, którzy sugerują, że używasz CSS, nie rozumieją tego. Może nie zawsze próbujesz wciąć akapit z boku, ale w rzeczywistości próbujesz umieścić dodatkowe spacje w określonym miejscu.

W istocie, w tym przypadku, spacje stają się treścią i Nie stylem. Nie wiem, dlaczego tak wielu ludzi tego nie widzi. Chyba sztywność, z jaką starają się egzekwować zasada separacji stylu i treści (HTML został zaprojektowany tak, aby robić to i to od początku - nie ma nic złego w sporadycznym definiowaniu stylu unikalnego elementu przy użyciu odpowiednich tagów bez konieczności poświęcania dużo więcej czasu na tworzenie arkuszy stylów CSS i nie ma w tym absolutnie nic nieczytelnego, gdy jest używany z umiarem. Jest też coś, co należy powiedzieć, aby móc zrobić coś szybko.) tłumaczy, że mogą traktować tylko białe znaki jako jest używany tylko do stylu i wcięcia.

A kiedy nie ma ładnego sposobu wstawiania spacji bez konieczności polegania na znacznikach &emsp; i &nbsp;, argumentowałbym, że uzyskany kod staje się znacznie bardziej nieczytelny niż gdyby istniał odpowiednio nazwany znacznik, który pozwalałby na szybkie wstawianie dużej liczby spacji (lub gdyby, wiesz, spacje nie były niepotrzebnie zużywane w pierwszej kolejności).

Jak to jednak jest, jak zostało powiedziane powyżej, najlepiej byłoby użyć &emsp; do włóż we właściwe miejsce.

 50
Author: GonzoKnight,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 08:45:14

Lepiej użyć znacznika pre . Znacznik pre definiuje wstępnie sformatowany tekst.

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

and line breaks.

</pre>

Dowiedz się więcej o pre tag Pod ten link

 42
Author: Srikanth Muttavarapu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 08:49:37

Natknąłem się na to podczas poszukiwania metody i skończyło się na wymyślaniu własnej, która wydaje się działać łatwo dla tego, co jest pożądane. Jestem nowy w publikowaniu tutaj, więc mam nadzieję, że to zadziała... Ale miej to w CSS: 

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

Wtedy w Twoim HTML 'u będzie to twoja "długa zakładka"w środku zdania, tak jak potrzebowałem: 

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

Zapisuje się od ilości &nbsp; lub &emsp;, których potrzebujesz.

Mam nadzieję, że to komuś pomoże, zdrówko!
 40
Author: Rob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-26 17:11:41

&emsp;, &ensp;, &#8195; lub &#8194; może być używany.

W3 mówi... 

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.

Czytaj więcej na W3.org dla HTML3

Czytaj więcej na W3.org dla HTML4

Jeszcze więcej na Wikipedia

 18
Author: shyammakwana.me,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-20 13:44:23

AFAIK, jedynym sposobem jest użycie 

&nbsp;

Jeśli możesz użyć CSS, możesz użyć wypełnienia lub marginesu. Zobacz też Model pudełkowy, A Dla Internet Explorera również przeczytaj błąd w modelu Internet Explorer box.

 14
Author: rahul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 08:36:40

Poniżej znajdują się 3 różne sposoby wstawiania pustej przestrzeni przez HTML

  1. wpisz &nbsp; aby dodać pojedynczą spację.
  2. wpisz &ensp; aby dodać 2 spacje.
  3. wpisz &emsp; aby dodać 4 spacje.
 10
Author: sanjeev51,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-26 21:12:27

Jeśli białe znaki stają się Tym ważnym, może być lepiej użyć preformatowanego tekstu i znacznika 

.
 8
Author: pavium,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-15 11:09:41

Znacznik nigdy nie pojawił się w przeglądarkach, pomimo wprowadzenia w HTML3. Zawsze uważałem, że to prawdziwa szkoda, bo życie byłoby o wiele łatwiejsze w wielu okolicznościach, gdybyśmy mieli je dostępne dla nas. Ale możesz łatwo temu zaradzić, aby dać fałszywy tag . Dodaj następujące elementy w nagłówku HTML lub (bez znaczników stylu) do CSS: 

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

Od tego momentu, gdy potrzebujesz karty w dokumencie, umieść tam . Nie jest to prawdziwa karta, ponieważ nie wyrównuje się do tab-marks, ale działa na większość potrzeb, bez konieczności błądzenia z niezgrabnych jednostek znaków lub przęseł. To sprawia, że naprawdę łatwo sprawdzić źródło, i cinch do formatowania prostych rzeczy, gdzie nie chcesz iść do kłopotów tabel lub innych bardziej złożonych "rozwiązań".

Jednym z miłych aspektów tego rozwiązania jest to, że możesz szybko wyszukać / zastąpić dokument tekstowy, aby zastąpić wszystkie karty znacznikiem .

Być może będziesz w stanie zdefiniować kilka rzeczywistych pozycji absolutnych lub lub cokolwiek innego) w razie potrzeby, ale nie znalazłem sposobu, aby to zrobić bez wcięcia kolejnych linii.

 8
Author: user1388236,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-19 08:37:12

Jeśli szukasz tylko wcięcia pierwszego zdania w akapicie, możesz to zrobić za pomocą małej sztuczki CSS: 

p:first-letter {
    margin-left: 5em;
}
 7
Author: peirix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 08:38:51

Możesz użyć tabeli i zastosować atrybut width do pierwszego <td>.

Kod: 

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

Wynik 

Content1       Content2
Content3       Content4
 7
Author: mangkokorix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 08:49:58

Użyłem span z in line stylizacji. Musiałem to zrobić, ponieważ przetwarzam ciąg zwykłego tekstu i muszę zastąpić \T 4 spacjami (appx). Nie mogłem użyć &nbsp;, ponieważ dalej w procesie były interpretowane tak, że ostateczny znak miał przestrzenie bez treści.

HTML: 

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

Użyłem go w funkcji php takiej jak Ta: 

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);
 5
Author: Gordy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-15 12:53:34

Jeśli potrzebowałeś TYLKO JEDNEJ zakładki, poniższe zadziałały dla mnie.

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

Z HTML coś w stylu: 

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

Możesz dodać więcej "kart", dodając dodatkowe Style " tab " i zmieniając HTML, takie jak: 

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

Z HTML coś w stylu: 

<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>
 4
Author: StrangeDucks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-24 20:56:17

Jeśli używasz CSS, proponuję:

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

Spowoduje to wcięcie pierwszego wiersza, tak jak w tradycyjnych publikacjach.

 3
Author: Slevin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-15 13:10:21 
<span style="margin-left:64px"></span>

Rozważ to tak: jedna zakładka jest równa 64 pikselom. Więc to jest przestrzeń, którą możemy dać za pomocą CSS.

 3
Author: Mateen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-12 06:38:15

Używam listy bez punktorów, aby nadać wygląd "z kartami". (To jest to, co czasami robię, gdy używam MS Word)

W pliku CSS: 

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

I w pliku HTML użyj list nieuporządkowanych: 

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

Piękno tego rozwiązania polega na tym, że można tworzyć kolejne wcięcia za pomocą zagnieżdżonych list.

Noob tutaj mówi, więc jeśli są jakieś błędy, proszę o komentarz.

 2
Author: funct7,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-25 01:27:12

Cóż, jeśli potrzeba długiego odstępu na początku jednej linii tylko z całego akapitu, to może to być rozwiązanie: 

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

Jeśli to za dużo do napisania lub potrzeba takich zakładek w wielu miejscach, możesz to zrobić 

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

Następnie dołącz to do CSS: 

span.tab {display:inline-block;height:1em;width:4em;}
 1
Author: Evgeny Savelev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-21 21:49:13

Możesz również użyć: 

p::before {
    content: "";
    padding-left: 30px;
}

I zastąp "p" dowolnym innym selektorem, który masz na myśli.

 1
Author: bognix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-12 06:36:31

Idealny kod CSS powinien być kombinacją właściwości" display "i" 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.
 1
Author: Olumide,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-21 13:12:27

Używając CSS i najlepszych praktyk, dynamiczne tworzenie zagnieżdżonych, wciętych menu byłoby następujące:

  1. tworzy styl dla każdego zagnieżdżenia, taki jak indent1, indent2 itd., Z Każdym określeniem własnego lewego marginesu. Struktura terenu rzadko powinna wykraczać poza trzy poziomy gniazdowania.
  2. Użyj zmiennej statycznej (integer)w funkcji samo-rekurencyjnej, aby śledzić rekurencję.
  3. dla każdej pętli dodaj numer pętli do słowa indent, używając skryptów po stronie serwera, takich jak PHP lub ASP, tak aby te menu były odpowiednio sformatowane przez CSS.

Alternatywnie, Pętla przez zmienną statyczną, aby dodać odstępy, używając wielu znaczników &nbsp; lub <pre> lub innych znaków, stosownie do przypadku.

Testując znak tabulacji poziomej, &#09; stwierdziłem, że nie działa jako zamiennik wielokrotności &nbsp; w opisywanym przeze mnie scenariuszu. Możesz mieć różne wyniki.

 0
Author: Ro Mc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-28 09:45:08

To jest trochę brzydkie rozwiązanie, ale możesz to zrobić 

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

A następnie użyj zmiennej tab w łańcuchach.

 0
Author: Aonghus McGovern,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-20 19:48:40

Only " pre " tag: 

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

Możesz zastosować dowolną klasę CSS na tym tagu.

 0
Author: Yanni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 08:47:22

Po prostu polecam: 

/* 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
Author: yoav barnea,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 08:48:19 
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Upewnij się, że kod koloru pasuje do tła px jest zmienna do żądanej długości Dla zakładki.

Następnie dodaj swój tekst po .

Kropka jest używana jako uchwyt spacji i jest łatwiejsza do wpisania, ale "& #160; " może być używany w miejsce kropki, dzięki czemu kodowanie kolorów jest irrelative. 

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

<t>&#160;</t>

Jest to przydatne głównie do wyświetlania akapitów tekstu, choć może się przydać w innych częściach skryptów.

 0
Author: Eric A. Tuttle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-01 00:16:16

CSS 

<html>
<head>
<style>
    tab:before
    {
        content: "\00a0\00a0\00a0\00a0";
    }
</style>
</head>

HTML 

<body>
    <tab> #include &lt; stdio.h &gt; <br>
    <tab> <br>
    <tab> int main (void) <br>
    <tab> { <br>
    <tab> <tab> printf ("Hello, World!"); <br>
    <tab> <tab> return 0; <br>
    <tab> } <br>
</body>
</html>

Rendered

Tutaj wpisz opis obrazka

 0
Author: Khaled.K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-26 18:34:01

To nie jest bezpośrednia odpowiedź, ale chciałem dodać zakładkę w dokumencie Markdown. Rysowałem taki wykres obiektowy: 

--Parent
    |
    + Child 1

Oczywiście w łatwy sposób można oznaczyć go jako kod przez wcięcia o 4 spacje, a następnie jest traktowany jako kod w Markdown.

    --Parent
        |
        + Child 1
 0
Author: hum3,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-09 10:20:56