Jak wstawiać spacje / tabulatory w tekście za pomocą HTML / CSS

183

Możliwe sposoby:

<pre> ... </pre>

lub

style="white-space:pre"

Coś jeszcze?

Yeseanul
źródło
1
Białe spacje w HTML , Tabs w HTML , Spacing Out Your HTML i oczywiście&nbsp;
benedict_w
Masz na myśli „tagi” czy „karty”?
user123444555621,
2
Czy istnieje odpowiednik &nbsp;zakładki?
Juan Solano
Nie ma &tab;, ale znalazłem ten mały fragment kodu js na github (w zasadzie znajdź i zamień, aby utworzyć pięć &nbsp;z rzędu) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
dgig 26.04.16

Odpowiedzi:

144

Aby wstawić tab spacepomiędzy dwa słowa / zdania, których zwykle używam

&emsp; i &ensp;

Giri
źródło
113

W przypadkach, w których szerokość / wysokość przestrzeni jest większa, &nbsp;zwykle używam:

Do poziomej przekładki:

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

Do elementu dystansowego pionowego:

<span style="display:block; height: YOURHEIGHT;"></span>
Japol
źródło
Uwaga: pamiętaj o określeniu wysokości lub szerokości w kategoriach pikseli, tj. 10 pikseli.
About7Deaths,
57

Możesz użyć &nbsp;dla spacji, &lt;dla <(mniej niż numer jednostki &#60;) i &gt;dla >(większy niż numer jednostki &#62;).

Pełna lista znajduje się w encji HTML .

Halim Qarroum
źródło
43

Spróbować &emsp;.

Zgodnie z dokumentacją w Postacie specjalne :

Podmioty charakter &ensp;i &emsp;oznaczają pl przestrzeń i przestrzeń em odpowiednio, gdzie pl przestrzeń jest o połowę mniejszy punkt i przestrzeń em jest równa wielkości punktowej bieżącej czcionki. W przypadku czcionek o stałej wysokości agent użytkownika może traktować spację jako ekwiwalent znaku spacji, a spację em jako ekwiwalent dwóch znaków spacji.

Abhishek Goel
źródło
24

Lubię używać tego:

W twoim CSS:

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

W swoim HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>
Ivar Harris
źródło
1
To dobra odpowiedź. Ale chciałbym tylko powiedzieć, że lepiej byłoby użyć klasy CSS zamiast id (oznacza to zastąpienie #tabprzez .tabi id="tab"przez class="tab"), ponieważ jeśli użyjemy go więcej niż jeden raz w tym samym dokumencie, możemy mieć niezdefiniowane zachowania. Zobacz na przykład to pytanie .
Hilder Vitor Lima Pereira
To pomogło mi dzisiaj. Dziękuję bardzo.
justnisar
19

Typy Spacesw HTML

Tworzy cztery spacje między tekstem &emsp;

Tworzy dwie spacje między tekstem - &ensp;

Tworzy regularną przestrzeń między tekstem - &nbsp;

tworzy wąską przestrzeń (podobną do zwykłej przestrzeni, ale niewielka różnica - "&thinsp";

odstępy między zdaniami - "</br>"

Ten link może ci pomóc. Sprawdź [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

Vivek Budithi
źródło
15
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

Pierwszy wiersz tego akapitu będzie wcięty o około pięć znaków, podobnie jak wcięcie z zakładkami.

Aby uzyskać więcej informacji, zobacz Jak używać HTML i CSS do tworzenia kart i odstępów .

sammyukavi
źródło
6

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

Możesz także użyć:

padding-left
padding-right
padding-top
padding-bottom
Ron1925
źródło
4

Idź o krok dalej niż @Ivar i stylizuj mój własny tag niestandardowy w ten sposób ... Dla mnie „karta” jest łatwiejsza do zapamiętania i pisania.

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

I implementacja HTML ...

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

Zrzut ekranu tego przykładu kodu

A mój zrzut ekranu ...

Dan
źródło
3

Jeśli prosisz o tabulatory do wyrównania elementów w niektórych liniach, możesz użyć <table>.

Umieszczenie każdej linii <tr> ... </tr>. I każdy element wewnątrz tej linii <td> ... </td>. I oczywiście zawsze możesz kontrolować wypełnienie każdej komórki tabeli, aby dopasować przestrzeń między nimi.

To sprawi, że będą wyrównane i będą ładnie wyglądać :)

Argento
źródło
3
Tabele powinny być używane do przedstawiania danych tabelarycznych, a nie do formatowania. W tabelach z lat 90. często wykorzystywano do formatowania z powodu ograniczeń HTML i frustracji podczas pisania HTML ze stylami, które działały konsekwentnie w różnych przeglądarkach. Dziś jest uważany za anty-wzór.
David Baucum
Rozumiem, o co ci chodzi, może to być oldschoolowe rozwiązanie, ale miałem kiedyś jego problem i używanie tabel działało idealnie dla mnie
Argento
1
Tak, ale możesz używać stylizacji tabel (z nowoczesnym CSS) bez zmiany znaczenia semantycznego! wyświetlanie: stół itp.
Julix
3

Alternatywnie określana jako stała lub twarda spacja, nieprzerwana spacja (NBSP) jest używana w programowaniu i przetwarzaniu tekstu do utworzenia spacji w linii, której nie można przerwać zawijaniem słów.

Dzięki HTML &nbsp;pozwala tworzyć wiele spacji, które są widoczne na stronie internetowej, a nie tylko w kodzie źródłowym.

mastro
źródło
1

Biała przestrzeń? Nie możesz po prostu użyć paddingu? To jest pomysł. W ten sposób możesz dodać „pusty obszar” wokół swojego elementu. Możesz więc użyć następujących tagów CSS:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
James Pac
źródło
1

Użyj standardowego CSS tab-size.

Aby wstawić symbol tabulacji (w przypadku standardowego klawisza tabulacji, przesuń kursor) naciśnij Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

Mój preferowany:

*{-moz-tab-size: 1; tab-size: 1;}

Spójrz na fragment kodu lub szybko znaleziony przykład w rozmiarze tabulacji .

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

MrSwed
źródło
0

To działało dla mnie:

W moim CSS mam:

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

Następnie w HTML używam tylko moich kart:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
użytkownik8657661
źródło
0

odpowiedź user8657661 jest najbliższa moim potrzebom ( ustawiania kilku linii). Nie mogłem jednak sprawić, aby przykładowy kod działał zgodnie z opisem, ale musiałem go zmienić w następujący sposób:

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

Jeśli potrzebujesz wyrównany do prawej numerów można zmienić left:150pxna right:150px, ale trzeba zmienić liczbę na podstawie szerokości ekranu (jak napisane numery byłoby 150 pikseli od prawej krawędzi ekranu).

Steve McRoberts
źródło
0

Możesz to zrobić poprzez wypełnienie <span style="padding-left: 20px;">, możesz sprawdzić więcej sposobów tutaj - puste miejsce w html

prasoon
źródło
-2

Oto tekst „Tab” (skopiuj i wklej): „”

Może wyglądać inaczej lub nie być pełną kartą z powodu ograniczeń odpowiedzi tej witryny.

James
źródło
1
Myślę, że musisz precyzyjniej sformułować odpowiedź. Masz na myśli kopiowanie i wklejanie gdzieś spacji? nie sądzę, żeby to działało tutaj.
smilyface
1
W źródle Markdown znajduje się TAB, ale tutaj nie ma wyjścia HTML (zamiast tego jest to pojedyncza spacja).
Peter Mortensen