Spazio tab invece di più spazi non interruttori ("nbsp")?

959

È possibile inserire un carattere di tabulazione in HTML invece di dover digitare  quattro volte?

html 
— Roch
fonte
21
Trovo utile usare <PRE> quando si usa il tempo di tabulazione all'inizio della riga (per esempio quando si esegue il qouting del codice C)
— Guy Kovel
Un TABpersonaggio ... per fare cosa?
— Michel de Ruiter,
puoi definire il tuo tag <tab>, quindi usare jQuery sulla readyfunzione per sostituirli o riempirli con il numero desiderato di spazi equivalenti.
— Khaled.K,
Se hai davvero bisogno di schede, prova awhite-space
— Buksy
6
Cordiali saluti - Se un 4x statico &nbsp;(o un singolo &emsp;) non lo sta tagliando e si desidera che si allineino alla successiva colonna "4 spaziate", come potrebbe fare una scheda (il che significherebbe a volte effettivamente il suo 0 o 1 o 2 o 3 spazi da allineare) .. come per esempio .. per esempio, alcuni editor di testo .. Sfortunatamente, non puoi in HTML ... senza <table>s ... e anche, usando una certa quantità di spazi per provare a hackerarlo ... richiederà un carattere fisso .... Penso che la maggior parte dei problemi risieda nella necessità di un carattere fisso e che HTML ami rimuovere gli spazi bianchi.
— Pimp Trizkit

Risposte:

582

È molto più pulito usare i CSS. Prova padding-left:5emo margin-left:5emcome appropriato invece.

— Alohci
fonte
13
L'imbottitura IMHO di @Alohci con CSS non è così buona poiché quando si ingrandisce il testo nel browser la dimensione del testo aumenta ma non il riempimento AFAIK.
— AlexV,
16
@AlexV - Se usi emcome dimensione, come ho fatto, dovrebbe espandersi con la dimensione del testo. Anche se non lo fai, dipenderà dalla natura del meccanismo di zoom utilizzato.
— Alohci,
2
@DavidThielen - HTML 3, in cui è apparso l'elemento TAB non è stato un inizio con i produttori di browser e l'elemento TAB non è mai stato implementato. Invece, è stato creato HTML 3.2 che era in qualche modo più semplice e che è stato invece implementato.
— Alohci,
2
@Eoin - davvero. Vale a dire quello che si vuole veramente in quei casi sono tab fermate . Ma non era quello che chiedeva l'OP. L'OP stava chiedendo una sostituzione per più spazi non interruttori sequenziali, che non avrebbero allineato le file. CSS ha una tab-sizeproprietà che è ciò che desideri davvero, ma il suo supporto per il browser è stato irregolare. In caso contrario, il layout della tabella o forse la flexbox sono le tue migliori scommesse.
— Alohci,
5
questo non risponde alla domanda. la risposta in basso di kristian affronta il problema
— sollevato
1265

Dipende dal set di caratteri che si desidera utilizzare.

Non c'è alcuna scheda entità definita nella norma ISO-8859-1 HTML - ma ci sono un paio di caratteri di spaziatura diversa &nbsp;, come &thinsp;, &ensp;e &emsp;.

In ASCII, &#09;è una scheda.

Ecco un elenco completo di entità HTML e una utile discussione sullo spazio bianco su Wikipedia .

— Kristian
fonte
2
Che differenza c'è tra &ensp;e &emsp;? Ho provato, entrambi hanno esattamente lo stesso spazio ..!
— Shafizadeh,
3
La salsa segreta per fare & # 09; mostrato come uno spazio a schede in HTML è la definizione CSS di spazi bianchi. <p style = "display: inline-block; white-space: pre-wrap;"> & # 09; ¡Muy bien! Tabbing funziona per me in spagnolo e inglese </p>. white-space: pre; funziona anche. È inoltre possibile utilizzare un tag "tab" <tab /> insieme al CSS :: prima della scheda Selector :: before {content: "\ 0009";} ma non viene visualizzato come scheda quando si evidenzia, taglia e incolla .
— Jules Bartow,
3
@Shafizadeh Dalle specifiche di W3 : uno spazio en ha la metà della dimensione in punti e uno spazio em è uguale alla dimensione in punti del font corrente. &emsp;è leggermente più grande. Riesco a vedere la differenza in Chrome 64 e FireFox 58.
— Dmitry
Stavo cercando questo durante la creazione di una query concat () di grandi dimensioni in MySQL per l'utilizzo in un report Crystal. l'ASCII (& # 09;) ha fatto il lavoro alla perfezione!
— Mike D Wakelyn,
Questo è quello che stavo cercando. Ho distanziato alcuni titoli usando l'ultima riga per giustificare l'attributo, ma non voglio che alcuni di essi si spezzino. Il & ensp; impedito questo.
— Alex Banman,
195

& EMSP; è la risposta.

Tuttavia, non saranno così funzionali come ci si potrebbe aspettare se si è abituati a utilizzare tabulazioni orizzontali negli elaboratori di testi, ad esempio Word, Wordperfect, Open Office, Wordworth, ecc. Sono a larghezza fissa e non possono essere personalizzati.

CSS offre un controllo molto maggiore e offre un'alternativa fino a quando il W3C non fornirà una soluzione ufficiale.

Esempio:

padding-left:4em

..o..

margin-left:4em

..come appropriato

Dipende dal set di caratteri che si desidera utilizzare.

È possibile impostare alcuni tag di tabulazione e usarli in modo simile a come si utilizzerebbero i tag 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>

... e usali così:

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

Esegui lo snippet sopra per vedere un esempio visivo.

Discussione extra

Non ci sono entità di tabulazione orizzontale definite in HTML ISO 8859-1, tuttavia ci sono alcuni altri spazi bianchi disponibili rispetto al solito &nbsp, per esempio; &thinsp;, &ensp;E il già menzionato &emsp;.

Vale anche la pena ricordare che in ASCII e Unicode, &#09;è una tabulazione orizzontale.

— Taumaturgo
fonte
2
Questo non è valido XHTMLsecondo il validatore W3
— Buksy
Questo è solo mezzo vero, dal momento che & emsp; è vero mark-up W3C valido. Ma ti stai chiaramente riferendo all'esempio CSS favorevole. In questo caso, stiamo utilizzando tag personalizzati, che sono nuovi mark-up e non fanno parte del set W3C. Il validatore W3C è rigoroso nella misura in cui i tag personalizzati vengono sempre contrassegnati come errori. Dipende da te che è più importante. È giunto il momento di ottenere un'implementazione decente ufficiale di schede aggiunte al set di markup HTML. Spero che sia di aiuto.
— WonderWorker,
2
L'ho usato in un caso per le intestazioni Swing JTable con un valore String e un carattere di tipo freccia HTML, dove avevo bisogno di questo carattere come separatore. Funziona alla grande! Grazie!
— Blake Neal,
2
"Stranamente, non ci sono tab orizzontali in html" Non è poi così strano come la formattazione si sia costantemente spostata da HTML a CSS, e una tab non è un elemento visivo solo un elemento di formattazione, ma una buona risposta e ben spiegata
— MikeT
75

Di seguito sono riportati i 3 diversi modi forniti da HTML per inserire spazio vuoto

  1. Digitare &nbsp;per aggiungere un singolo spazio.
  2. Digitare &ensp;per aggiungere 2 spazi.
  3. Digitare &emsp;per aggiungere 4 spazi.
— sanjeev51
fonte
3
Basta aggiungere anche ;a loro. Mi piace&nbsp;
— Amio.io,
2
Questa risposta risponde effettivamente alla domanda. È stupido come una risposta CSS sia contrassegnata come risposta.
— Mani,
@Mani La domanda è stata posta nel 2009 e la risposta accettata è del 2009. Questa risposta è stata aggiunta nel 2018 .. Quando la guardi in questo modo, non è stupido.
— ᴛʜᴇᴘᴀᴛᴇʟ
@ ᴛʜᴇᴘᴀᴛᴇʟ Dimentica se questo risponde effettivamente alla domanda o no, ma quello contrassegnato non risponde esattamente è il punto che sto cercando di fare.
— Mani,
Questa è la risposta vera e propria. Grazie!
— Ariel Monaco,
67

Provare &emsp;

È equivalente a quattro &nbsp;s.

— Abhishek Goel
fonte
In realtà non è la risposta corretta come w3.org/MarkUp/html3/specialchars.html . dice chiaramente che dipende dal tipo di carattere utilizzato, inoltre lo spazio em è uguale alla dimensione in punti del carattere corrente e lo spazio em come equivalente a due caratteri spaziali
— le0diaz,
52

Non esiste davvero un modo semplice per inserire più spazi all'interno (o al centro) di un paragrafo. Coloro che suggeriscono di usare i CSS non hanno ragione. Potresti non sempre cercare di indentare un paragrafo da un lato ma, in effetti, provare a mettere spazi extra in un punto particolare di esso.

In sostanza, in questo caso, gli spazi diventano il contenuto e non lo stile. Non so perché così tante persone non lo vedano. Immagino la rigidità con cui cercano di imporre la separazione tra stile e regola dei contenuti (HTML è stato progettato per fare entrambe le cose dall'inizio - non c'è nulla di sbagliato nel definire occasionalmente lo stile di un elemento unico usando tag appropriati senza dover spendere molto di più tempo nella creazione di fogli di stile CSS e non c'è assolutamente nulla di illeggibile quando viene usato con moderazione. C'è anche qualcosa da dire per poter fare qualcosa in fretta.) si traduce in come possono solo considerare i caratteri degli spazi bianchi come usati solo per stile e indentazione.

E quando non esiste un modo grazioso per inserire spazi senza dover fare affidamento su tag &emsp;e &nbsp;, direi che il codice risultante diventa molto più illeggibile che se ci fosse un tag con un nome appropriato che ti avrebbe permesso di inserire rapidamente un gran numero di spazi (o se, sai, gli spazi non sono stati inutilmente consumati in primo luogo).

Tuttavia, come è stato detto sopra, la soluzione migliore sarebbe quella di utilizzare &emsp;per inserire nel posto giusto.

— GonzoKnight
fonte
1
HTML non è stato progettato fin dall'inizio per essere personalizzato in modo personalizzato.
— Markus Unterwaditzer,
Adoro il tuo punto su come il rientro non è sempre quello che la gente vuole!
— Programmi Redwolf,
46

È meglio usare il pre tag. Il tag pre definisce il testo preformattato.

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

and line breaks.

</pre>

saperne di più sul pre tag a questo link

— Srikanth Muttavarapu
fonte
1
@HuzaifaSaifuddin che vuoi dire? <pre>è standardizzato in HTML5 con lo stesso comportamento di HTML4.
— Sumit
Mi dispiace non so Y ho scritto che .. Sono d'accordo con quello che dici..Scusa per informazioni sbagliate
— Huzaifa Saifuddin
Stavo formattando l'output da incollare in fogli di calcolo e questo mi ha permesso di inserire caratteri \ t per fare tabulazioni. Sicuramente è stata la mia risposta. Ben fatto.
— Craig Brett,
1
Questa è l'opzione migliore IMHO. Inoltre, possiamo applicare una definizione di stile su <pre>, quindi possiamo avere il carattere 'monospace' corretto se necessario. Esempio: pre {famiglia di caratteri: "Lucida Console", Monaco, monospace; dimensione carattere: 90%; }
— riverisci il
41

Mi sono imbattuto in questo mentre cercavo un metodo e ho finito per capire il mio che sembra funzionare facilmente per ciò che si desidera. Sono nuovo a pubblicare qui, quindi spero che funzioni ... Ma hai questo nei CSS:

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

Quindi nel tuo HTML hai questa "scheda lunga" a metà frase come se avessi bisogno:

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

Risparmia dalla quantità &nbsp;o di &emsp;cui avresti bisogno.

Spero che questo aiuti qualcuno, evviva!

— rapinare
fonte
3
Ciò aggiungerà 80 px a sinistra e 80 px a destra del spantag, non esattamente una scheda.
— Mc il
Ancora una risposta intelligente poiché stai aggiungendo solo un po 'di markup mentre permetti ai CSS di fare lo styling.
— invoca il
9

Se lo spazio bianco diventa così importante, potrebbe essere meglio usare il testo preformattato e il tag <pre>.

— pavium
fonte
L'OP non è così particolare riguardo agli spazi bianchi, ha solo chiesto delle scorciatoie per i multipli &nbsp;. Invocare il <pre>tag creerà molto lavoro extra.
— isomorfismi
Per evitare il carattere monospace, usa css "white-space: pre-wrap"
— hultqvist
Lo spazio bianco non è una that importantcosa. È un dato di fatto.
— Programmi Redwolf,
9

Se stai cercando di indentare solo la prima frase in un paragrafo, puoi farlo con un piccolo trucco CSS:

p:first-letter {
    margin-left: 5em;
}
— peirix
fonte
Si. Funzionerà anche quello. Ricorda solo di metterlo :first-letterse il punto è di indentare solo la prima frase.
— peirix,
9

Il tag <tab> non è mai diventato browser, nonostante sia stato introdotto in HTML3. Ho sempre pensato che fosse un vero peccato perché la vita sarebbe molto più facile in molte circostanze se ce l'avessimo a disposizione. Ma puoi facilmente rimediare a questo per darti un tag <tab> falso. Aggiungi quanto segue in testa al tuo HTML o altrimenti (senza i tag di stile) nel tuo CSS:

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

Da quel momento in poi, quando hai bisogno di una scheda nel tuo documento, inserisci <tab>. Non è una scheda vera perché non si allinea ai segni di tabulazione, ma funziona per la maggior parte delle esigenze, senza doversi preoccupare di entità o intervalli di caratteri goffi. Rende davvero facile controllare la tua fonte e un gioco da ragazzi per formattare cose semplici in cui non vuoi andare alla seccatura di tabelle o altre "soluzioni" più complesse.

Un aspetto interessante di questa soluzione è che puoi fare una rapida ricerca / sostituzione di un documento di testo per sostituire tutti i TAB con il tag <tab>.

Potresti essere in grado di definire un gruppo di TAB di posizione assoluta reale, quindi utilizzare la scheda appropriata (ad esempio <tab2> o <tab5> o qualsiasi altra cosa) dove necessario, ma non ho trovato un modo per farlo senza che rientri le righe successive .

— user1388236
fonte
7

È possibile utilizzare una tabella e applicare un widthattributo al primo <td>.

Codice:

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

Risultato

Content1       Content2
Content3       Content4
— mangkokorix
fonte
Grazie!! Questa è la soluzione migliore e più generale per le situazioni in cui i CSS non sono possibili.
— John Henckel,
6

Ho usato una campata con uno stile in linea. Ho dovuto farlo mentre elaboravo una stringa di testo semplice e ho bisogno di sostituire \ t con 4 spazi (appx). Non potevo usare&nbsp; ulteriormente nel processo in cui venivano interpretati in modo che il markup finale avesse spazi senza contenuto.

HTML:

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

L'ho usato in una funzione php come questa:

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

Se hai bisogno di una sola scheda, per me ha funzionato.

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

con l'HTML qualcosa come:

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

Puoi aggiungere più "tab" aggiungendo altri stili "tab" e modificando l'HTML come:

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

con l'HTML qualcosa come:

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

Se si utilizza CSS, suggerirei quanto segue:

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

Questo farà rientrare la prima riga come nelle pubblicazioni tradizionali.

— Slevin
fonte
4

C'è un semplice CSS per questo:

white-space: pre;

Mantiene gli spazi che aggiungi in HTML anziché unificarli.

— avi
fonte
3 
<span style="margin-left:64px"></span>

Consideralo in questo modo: una scheda è uguale a 64 pixel. Quindi questo è lo spazio che possiamo dare ai CSS.

— Mateen
fonte
3

possiamo usare style = "white-space: pre" in questo modo:

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

lo spazio vuoto all'interno è pieno di schede, la quantità di schede dipende dal testo.

sarà simile a questo:

Text    : value
Text2   : value2
Text32  : value32
— Esgi Dendyanri
fonte
3

Il codice CSS ideale da utilizzare dovrebbe essere una combinazione di proprietà "display" e "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
fonte
2

Bene, se uno ha bisogno di un lungo spazio bianco all'inizio di una riga solo dall'intero paragrafo, allora questa potrebbe essere una soluzione:

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

Se è troppo da scrivere o se si hanno bisogno di tali schede in molti posti, è possibile farlo

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

Quindi includilo nel CSS:

span.tab {display:inline-block;height:1em;width:4em;}
— Evgeny Savelev
fonte
2

Uso un elenco senza punti elenco per dare l'aspetto "a schede". (È quello che a volte faccio quando utilizzo MS Word)

Nel file CSS:

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

E nel file HTML usa elenchi non ordinati:

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

Il bello di questa soluzione è che puoi fare ulteriori rientri usando liste nidificate.

Un noob qui parlando, quindi se ci sono errori, si prega di commentare.

— funct7
fonte
(x) HTML dovrebbe specificare il contenuto del documento, come viene visualizzato deve essere gestito da CSS. Vi sono ragioni per cui la disposizione di pagine Web utilizzando tabelle non deve mai essere utilizzata per dati non tabulari.
— Nielsvh,
1

usiamo la classe di spazio personalizzata

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

Includi la classe spaziale nei CSS.

.space 
{
   margin-left:45px;
}
— rashedcs
fonte
1
Come nella risposta di Alohci, si prega di utilizzare em/ remmisurazioni, per consentire lo zoom del testo del browser.
— Charlie Harding,
0

Utilizzando CSS e best practice, la creazione dinamica di menu nidificati e rientrati sarebbe la seguente:

  1. Crea uno stile per ogni annidamento, come indent1, indent2 ecc., Specificando ciascuno il proprio margine sinistro. La struttura del sito dovrebbe raramente andare oltre i tre livelli di nidificazione.
  2. Utilizzare una variabile statica (numero intero) all'interno della funzione ricorsiva per tenere traccia della ricorsione.
  3. Per ogni loop, aggiungi il numero di loop alla parola indent, usando gli script lato server come PHP o ASP, in modo che questi menu siano formattati in modo appropriato dai CSS.

In alternativa, scorrere la variabile statica per aggiungere la spaziatura usando più &nbsp;o<pre> tag o altri caratteri, a seconda dei casi.

Dal test del carattere di tabulazione orizzontale, &#09;ho scoperto che non funziona in sostituzione di multiplo &nbsp;nello scenario che ho descritto. Potresti avere risultati diversi.

— Ro Mc
fonte
0

Questa è una brutta soluzione, ma potresti farlo

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

E quindi usa la variabile tab nelle tue stringhe.

— Aonghus McGovern
fonte
0

Solo tag "pre":

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

È possibile applicare qualsiasi classe CSS su questo tag.

— Yanni
fonte
0

Vorrei semplicemente raccomandare:

/* 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>
— yoav barnea
fonte
0 
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Assicurati che il codice colore corrisponda allo sfondo in cui px è variabile alla lunghezza desiderata per la scheda.

Quindi aggiungi il testo dopo <t>. </ T>

Il periodo viene utilizzato come spazio titolare ed è più facile da digitare, ma "& # 160;" può essere usato al posto del periodo anche rendendolo così il codice colore è irrelativo.

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

<t>&#160;</t>

Ciò è utile principalmente per visualizzare paragrafi di testo, sebbene possa rivelarsi utile in altre parti di script.

— Eric A. Tuttle
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.