Spécifier la largeur de l'onglet?

Question

Est-il possible de définir l'onglet de largeur lorsque l'espace est affiché (dire à l'intérieur d'une balise <pre> ou quelque chose)? Je ne peux pas trouver quelque chose à faire avec le CSS, mais il semble que ce serait une chose assez commune à vouloir faire.

Dans mon cas, la largeur d'un onglet est tellement large qu'elle provoque certains de mes extraits de code sur une page trop large. Si j'arrivais à les raccourcir l'onglet de largeur pour le faire rentrer sans les barres de défilement, il rendrait les choses beaucoup plus facile. (Je suppose que je pourrais juste remplacer les tabulations par des espaces, mais idéalement, j'aimerais trouver un moyen de le faire sans le faire)

Answer 1

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

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

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

Voici une simple page de test pour la prise en charge du navigateur .

Answer 2

Je crois que ce blog devrait vous aider:

Voici une solution, elle n'est pas soignée puisqu'elle doit être effectuée pour chaque instance d'un onglet, mais il rend les onglets prennent moins de place et conserve la mise en forme pour copier du navigateur (évidemment remplacer "UN SEUL ONGLET ICI" avec un réel onglet, ce blog logiciel supprime automatiquement les onglets à partir des entrées paraît-il):

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

En gros, remplacer toutes les occurrences d'un onglet dans votre code avec cet extrait de code (après le choix d'une largeur appropriée, vous pourriez le faire dans une feuille de style assez facilement). Le code artificiellement insère la marge tout en gardant l'onglet d'origine dans le code de prêts pour le copier/coller.

D'ailleurs, il ressemble tab stops dans la spécification CSS.

Il y a aussi un autre Débordement de Pile question sur ce sujet.

Answer 3

Comme George Stocker souligné les taquets de tabulation devraient être à venir le long dans un avenir CSS (FF4 devraient en avoir un), mais dans le temps...

Le problème avec le lié billet de blog, c'est que les onglets ne sont pas copiés lors de la copie/coller à partir du navigateur. Comme une alternative, essayez les opérations suivantes:

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

Où "\t" dans le ci-dessus est le caractère de tabulation. Il faut maintenant copier et coller correctement. Pas aussi beau que de le flanquer une propriété css sur la balise <pre>, mais telle est la vie.

(P. S. répondu à ce vieux post comme sa grande sur google pour 'onglet css width' et je suis venu avec cette solution, peu de temps après son arrivée ici.)