web-dev-qa-db-fra.com

Spécification de la largeur de tabulation?

Est-il possible de définir la largeur de tabulation lorsque des espaces sont affichés (disons dans une balise <pre> ou quelque chose)? Je ne trouve rien pour le faire avec CSS, mais cela semble être une chose assez courante à vouloir faire.

Dans mon cas, la largeur de l'onglet est si large qu'elle rend certains de mes extraits de code sur une page trop larges. Si je pouvais en quelque sorte raccourcir la largeur de tabulation pour l'adapter sans barres de défilement, cela rendrait les choses beaucoup plus faciles. (Je suppose que je pourrais simplement remplacer les tabulations par des espaces, mais idéalement, j'aimerais trouver un moyen de faire ceci sans faire cela)

htmlcssxhtmlwhitespace
62
Wilco

Je pense que cela article de blog devrait vous aider:

Voici une solution, ce n'est pas soigné car cela doit être fait pour chaque instance d'un onglet, mais cela fait que les onglets prennent moins d'espace et préserve la mise en forme pour la copie hors du navigateur (évidemment remplacez "UN ONGLET ICI" par un véritable onglet, ce logiciel de blog supprime automatiquement les onglets des entrées, il semble):

<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>

Fondamentalement, remplacez chaque instance d'un onglet dans votre code par cet extrait de code (après avoir choisi une largeur appropriée, vous pouvez le faire dans une feuille de style assez facilement). Le code insère artificiellement la marge tout en gardant l'onglet d'origine dans le code prêt pour le copier/coller.

Soit dit en passant, il semble que tab stops en a fait la spécification CSS .

Il y a aussi une autre question Stack Overflow à ce sujet .

5
George Stocker

Utilisez la propriété tab-size . Vous aurez actuellement besoin des préfixes des fournisseurs. Exemple:

pre
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

Voir aussi l'article sur developer.mozilla.org: tab-size .

.tabstop
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}
Unstyled tabs (browser default)
<pre>
        one tab
                two tabs
                        three tabs
</pre>

Styled tabs (4em)
<pre class="tabstop">
        one tab
                two tabs
                        three tabs
</pre>
97
fuxia

Comme l'a souligné George Stocker, les tabulations devraient arriver dans un futur CSS (FF4 devrait l'avoir), mais en attendant ...

Le problème avec l'article de blog lié est que les onglets ne sont pas copiés lors du copier/coller à partir du navigateur. Comme alternative, essayez ce qui suit:

<style>
.tabspan{
    display:inline:block;
    width:4ex;
}
</style>
<pre>
int main()
{
<span class=tabspan>\t</span>return 0;
}
</pre>

Où "\ t" dans ce qui précède est le caractère de tabulation réel. Maintenant, il doit copier et coller correctement. Pas aussi agréable que de gifler une propriété css sur la balise <pre>, mais telle est la vie.

(P.S. a répondu à cet ancien message comme étant le plus élevé sur Google pour la `` largeur de l'onglet CSS '' et j'ai trouvé cette solution peu de temps après être venu ici.)

4
DaedalusFall