Eventuali duplicati:
Specifying Tab-Width?Rendering di un carattere di tabulazione (nell'elemento PRE) come 4 spazi in HTML?
ho bisogno di stampare un carattere di tabulazione in un tag pre. Il carattere HTML per scheda è 	 ma su tutti i browser l'ho provato restituendo 8 spazi.
C'è un modo per regolare questo per rendere la larghezza di 4 spazi o c'è un altro carattere HTML che posso usare che è di 4 spazi?
Mentre sono d'accordo con la prima risposta che si potrebbe anche semplicemente mettere 4 spazi, ci sembra di essere un po 'di supporto per una proprietà tab-size all'interno di CSS (anche se il supporto IE manca):
pre {
-moz-tab-size: 4; /* Firefox 4+ */
-o-tab-size: 4; /* Opera 11.5 & 12.1 only */
tab-size: 4; /* Chrome 21+, Safari 6.1+, Opera 15+ */
}
Effetto solo con white-space: pre o white-space: pre-wrap (o con i tag <pre>).
C'è una serie di quattro caratteri che è possibile utilizzare, che si espande sempre in quattro spazi. Sono quattro spazi (entro lo pre almeno e altri elementi disegnati in modo appropriato).
Poiché non esiste un metodo universalmente condiviso su quanto dovrebbe essere ampia una scheda e come esattamente dovrebbe comportarsi, è meglio non usarlo in luoghi in cui è necessario un controllo preciso su come appare l'output. Né l'HTML né i browser forniscono alcun mezzo per impostare la larghezza della tabulazione.
Pfft. * Tutti * sa che le schede sono 3 spazi. –
Vogliono quattro spazi, però. Non posso farci molto. – Joey
CSS è il modo migliore per gestire questo per la visualizzazione. Ma se vuoi che le persone siano in grado di copiare/incollare il testo e ottenere quattro spazi per una scheda, allora finirai con l'usare Javascript per modificare i tuoi pre-tag.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<pre class="downtab">All Tabs Changed a little.</pre>
<script type="text/javascript">
$(document).ready(function() {
$(".downtab").each(function() {
var text = $(this).html().replace(/\t/g, ' ');
$(this).html(text);
});
});
</script>
</body>
</html>
La vera magia ecco la funzione di sostituzione(), utilizzando una regex globalmente corrispondenza.
In base alle specifiche HTML e nello studio del browser, punti di tabulazione hanno 8 caratteri. Ciò non significa che una scheda sia di 8 spazi. Ad esempio, se si dispone di ABC DEF, la scheda provoca un avanzamento di 5 caratteri.
In CSS, da una bozza CSS3, è possibile set the “tab size”, ovvero la distanza tra punti fermi, ad es. tab-size: 4. Il supporto del browser è abbastanza buono, quando vengono usati anche i prefissi dei fornitori, ad eccezione di IE.
+1 anche se il supporto del browser per 'tab-size' è attualmente molto limitato (secondo [MDN] (https://developer.mozilla.org/en-US/docs/CSS/tab-size)) - rivendicano il La versione prefissata di '-moz' è stata supportata in FF per molto tempo, ma Chome non l'ha supportata fino a 21, Opera non fino al 10.6 e IE potrebbe non supportarla affatto. La demo che fornisci certamente non funziona in IE8. – DaveRandom