Come inserire spazi / tabulazioni nel testo usando HTML / CSS

Modi possibili:

<pre> ... </pre>

o

style="white-space:pre"

Qualunque altra cosa?

Per inserire tab spacetra due parole / frasi di solito uso

  e  

Nei casi in cui la larghezza / altezza dello spazio è oltre   solito uso:

Per distanziatore orizzontale:

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

Per distanziatore verticale:

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

È possibile utilizzare  per gli spazi, <per <(minore di, numero entità <) e >per >(maggiore di, numero entità >).

Un elenco completo è disponibile in Entità HTML .

Prova  .

Come da documentazione relativa ai caratteri speciali :

Le entità carattere  e  indicano rispettivamente uno spazio en e uno spazio em, in cui uno spazio en ha la metà della dimensione in punti e uno spazio em è uguale alla dimensione in punti del font corrente. Per i caratteri a passo fisso, l'agente utente può considerare lo spazio en come equivalente a un carattere spazio e lo spazio em come equivalente a due caratteri spazio.

Mi piace usare questo:

Nel tuo CSS:

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

Nel tuo HTML:

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

Tipi di Spacesin HTML

Crea quattro spazi tra il testo-  

Crea due spazi tra il testo -  

Crea uno spazio regolare tra il testo -  

crea uno spazio stretto (simile allo spazio normale ma leggera differenza - "&thinsp";

spaziatura tra frasi - "</br>"

Questo link potrebbe aiutarti. Dai un'occhiata a [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

La prima riga di questo paragrafo sarà rientrata di circa cinque caratteri, simile a un rientro a schede.

Vedi Come utilizzare HTML e CSS per creare schede e spaziatura per ulteriori informazioni.

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

Puoi anche usare:

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

Fai un passo avanti rispetto a @Ivar e dai uno stile al mio tag personalizzato in questo modo ... Per me 'tab' è più facile da ricordare e digitare.

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

E l'implementazione HTML ...

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

E il mio screenshot ...

Se stai chiedendo le schede per allineare le cose in alcune linee, puoi usare <table>.

Inserire ogni riga <tr> ... </tr>. E ogni elemento all'interno di quella linea in <td> ... </td>. E ovviamente puoi sempre controllare il riempimento di ogni cella della tabella per regolare lo spazio tra di esse.

Questo li renderà allineati e sembreranno piuttosto belli :)

In alternativa indicato come spazio fisso o spazio duro, lo spazio non interruzione (NBSP) viene utilizzato nella programmazione e nell'elaborazione testi per creare uno spazio in una linea che non può essere interrotto dall'involucro di parole.

Con HTML,  ti permette di creare più spazi che sono visibili su una pagina web e non solo nel codice sorgente.

Spazio bianco? Non potresti usare solo l'imbottitura? Questa è un'idea È così che puoi aggiungere alcune "aree vuote" attorno al tuo elemento. Quindi puoi usare i seguenti tag CSS:

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

È possibile utilizzare questo codice  per aggiungere uno spazio nel contenuto HTML. Per lo spazio delle schede, usalo 5 volte o più.

Guarda un esempio qui: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Usa il CSS standard tab-size.

Per inserire un simbolo di tabulazione (se il tasto tab standard, sposta il cursore) premi Alt+ 0+ 0+9

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

Il mio preferito:

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

Guarda lo snippet o un esempio trovato di dimensioni della scheda .

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

Questo ha funzionato per me:

Nel mio CSS ho:

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

Quindi nell'HTML uso solo le mie schede:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

La risposta di user8657661 è la più vicina alle mie esigenze (di allineare le cose su più righe). Tuttavia, non sono riuscito a far funzionare il codice di esempio come previsto, ma ho dovuto modificarlo come segue:

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

Se avete bisogno di numeri allineato a destra è possibile modificare left:150pxa right:150px, ma avrete bisogno di modificare il numero in base alla larghezza dello schermo (come scritto i numeri sarebbero 150 pixel dal bordo destro dello schermo).

Puoi eseguire il padding come <span style="padding-left: 20px;">, puoi controllare più modi qui su - spazio vuoto in html

Ecco un testo "Tab" (copia e incolla): ""

Potrebbe apparire diverso o non una scheda completa a causa delle limitazioni di risposta di questo sito.