La Spécification De L'Onglet De La Largeur?

Est-il possible de définir l'onglet de largeur lorsque l'espace est affiché (disons dans un <pre> tag 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)

  • Récemment, j'ai créé ce plugin jQuery pour résoudre ce problème sur un de mes sites. github.com/davestewart/jquery-plugins/tree/master/tabSize Il utilise la propriété CSS3 onglet taille si elle est disponible, mais si pas, il convertit correctement les tabulations en espaces, y compris ceux des onglets qui ne prennent pas toute la largeur d'un onglet, alias de colonnes.
  • Double avec peut-être d'autres réponses.
InformationsquelleAutor Wilco | 2009-03-20
  1. 5

    Je crois que ce post de blog devraient 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 l'a fait dans le Spécification CSS.

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

    • "des taquets de tabulation dans la spécification CSS" Non, ils n'ont pas. Au moins, ils n'ont pas de niveaux 1 ou 2 au moment de cette réponse. Il y a un projet tab-size propriété dans le CSS3 brouillons bien que.
    • "je crois que ce blog devrait vous aider." Puis citer la partie pertinente de la poste. Liens externes peuvent être modifiés, supprimés, déplacés, etc. Débordement de pile est destinée à être une ressource non seulement lorsque vous poser/répondre à une question, mais dans le futur, quand les autres le trouver et le besoin de faire référence à l'information. Détails: meta.stackexchange.com/questions/8231/... La bonne nouvelle, c'est qu'il me semble (sur bref coup d'œil) que, plus de deux ans plus tard, ce blog est toujours vivant et le post est toujours là. (Je ne sais pas si le contenu a changé.)
    • Vous êtes en droit de downvote mon post, parce que je ne comprend pas une synthèse, et je vais travailler sur la dont il. Mais pendant que vous downvote aujourd'hui, remarque que la réponse a été écrit presque 3 ans, lorsque la politique n'était pas aussi clair qu'il l'est maintenant. Peut-être vous devriez avoir quitté le commentaire, m'a donné une chance de régler le problème, et puis downvote si je n'ai pas?
    • Tout à fait d'accord. (Et oui, c'était moi qui downvoted récemment, bien que la note que vous avait aucun moyen de savoir que pour vous jusqu'à ce que je vous ai dit -- votre post a été récemment lié et ont récemment attiré l'attention de beaucoup de gens; il pourrait facilement avoir été commentés, et séparément, downvoted.) Aura au moins l'inverse que quand je peux (je ne peux pas jusqu'à ce que la réponse change).
    InformationsquelleAutor George Stocker
  2. 97

    Utiliser le l'onglet taille de la propriété. Vous aurez besoin de fournisseur de préfixes actuellement. Exemple:

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

    Voir aussi l'article sur developer.mozilla.org: onglet taille.

    CSS:

    .tabstop
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

    HTML:

    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>

    • Par ailleurs, j'ai été sélectionné aléatoirement upvoter la nuit dernière. J'ai enfin réussi à la documentation du code et a redouter l'idée de commutation des espaces pour la énorme onglet largeurs dans le <pre> blocs - ce qui a fait le tour de Firefox, mais ne semble pas fonctionner (encore) sur webkit étonnamment - en fait, il semble que seuls opera et firefox sont de le soutenir... retour à la les espaces, je suppose.
    • Nouvelle version de Chrome prend en charge l'onglet "taille" maintenant 🙂
    • Tous les navigateurs sont pris en charge dès maintenant en dehors de IE/Edge. MS a sous considération. Vous pouvez voter pour la fonctionnalité ici.
    • les navigateurs est une déclaration assez audacieuse, étant donné la quantité astronomique de navigateurs mobiles de nos jours. 🙂
    • La plupart des navigateurs mobiles utilisent le même moteur(s). Mais, ce n'est pas tous navigateurs 🙂 de toute façon, doit avoir qualifié c'.
    InformationsquelleAutor fuxia
  3. 4

    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 le <pre> tag, 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.)

    InformationsquelleAutor DaedalusFall