Comment insérer des espaces / tabulations dans du texte en utilisant HTML / CSS


190

Moyens possibles:

<pre> ... </pre>

ou

style="white-space:pre"

Rien d'autre?



Voulez-vous dire "tags" ou "onglets"?
user123444555621

2
Existe-t-il un équivalent à &nbsp;mais pour faire un onglet?
Juan Solano

Il n'y a pas &tab;, mais j'ai trouvé ce petit extrait de js sur github (essentiellement, recherchez et remplacez pour en créer cinq &nbsp;de suite) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
dgig

Réponses:


147

Pour insérer tab spaceentre deux mots / phrases que j'utilise habituellement

&emsp; et &ensp;


113

Dans les cas où la largeur / hauteur de l'espace est au-delà, &nbsp;j'utilise généralement:

Pour entretoise horizontale:

<span style="display:inline-block; width: YOURWIDTH;"></span>

Pour entretoise verticale:

<span style="display:block; height: YOURHEIGHT;"></span>

Remarque: assurez-vous de spécifier la hauteur ou la largeur en termes de pixels, c'est-à-dire 10px.
About7Deaths

59

Vous pouvez utiliser &nbsp;pour les espaces, &lt;pour <(inférieur à, numéro d'entité &#60;) et &gt;pour >(supérieur à, numéro d'entité &#62;).

Une liste complète peut être trouvée dans Entités HTML .


44

Essayez &emsp;.

Selon la documentation sur les caractères spéciaux :

Les entités de caractère &ensp;et &emsp;désignent respectivement un espace en et un espace em, où un espace en est la moitié de la taille en points et un espace em est égal à la taille en points de la police actuelle. Pour les polices à pas fixe, l'agent utilisateur peut traiter l'espace en comme étant équivalent à un caractère d'espace, et l'espace em comme étant équivalent à deux caractères d'espace.


24

J'aime utiliser ceci:

Dans votre CSS:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

Dans votre HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>

1
C'est une bonne réponse. Mais je voudrais juste dire qu'il serait préférable d'utiliser la classe CSS au lieu de id (cela signifie remplacer #tabpar .tabet id="tab"par class="tab") car si nous l'utilisons plus d'une fois dans un même document, nous pouvons avoir des comportements indéfinis. Voir, par exemple, cette question .
Hilder Vitor Lima Pereira

Cela m'a aidé aujourd'hui. Merci beaucoup.
justnisar le

21

Types de SpacesHTML

Crée quatre espaces entre le texte- &emsp;

Crée deux espaces entre le texte - &ensp;

Crée un espace régulier entre le texte - &nbsp;

crée un espace étroit (similaire à un espace régulier mais légère différence - "&thinsp";

espacement entre les phrases - "</br>"

Ce lien pourrait vous aider. Découvrez [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]



6

<span style="padding-left:68px;"></span>

Vous pouvez aussi utiliser:

padding-left
padding-right
padding-top
padding-bottom

4

Allez plus loin que @Ivar et stylisez ma propre balise personnalisée comme ça ... Pour moi, «tab» est plus facile à retenir et à taper.

tab {
    display: inline-block;
    margin-left: 40px;
}

Et l'implémentation HTML ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

Capture d'écran de cet exemple de code

Et ma capture d'écran ...


3

Si vous demandez des onglets pour aligner des éléments sur certaines lignes, vous pouvez utiliser <table>.

Mettre chaque ligne <tr> ... </tr>. Et chaque élément à l'intérieur de cette ligne <td> ... </td>. Et bien sûr, vous pouvez toujours contrôler le remplissage de chaque cellule du tableau pour ajuster l'espace entre elles.

Cela les rendra alignés et ils seront plutôt beaux :)


3
Les tableaux doivent être utilisés pour représenter des données tabulaires, pas pour le formatage. Dans les années 90, les tableaux étaient fréquemment utilisés pour la mise en forme en raison des limites du HTML et des frustrations lors de l'écriture de HTML avec des styles qui fonctionnaient de manière cohérente entre les navigateurs. Aujourd'hui, il est considéré comme un anti-pattern.
David Baucum

Je vois votre point, c'est peut-être une solution à l'ancienne, mais j'ai eu son problème une fois et l'utilisation de tables a parfaitement fonctionné pour moi
Amr Saber

1
Oui, mais vous pouvez utiliser le style de table (avec CSS moderne) sans gâcher la signification sémantique! affichage: table, etc.
Julix

3

Alternativement appelé espace fixe ou espace dur, l'espace insécable (NBSP) est utilisé dans la programmation et le traitement de texte pour créer un espace dans une ligne qui ne peut pas être interrompu par retour à la ligne.

Avec HTML, &nbsp;vous permet de créer plusieurs espaces qui sont visibles sur une page Web et pas seulement dans le code source.


1

Espace blanc? Ne pourriez-vous pas simplement utiliser un rembourrage? C'est une idée. C'est ainsi que vous pouvez ajouter une "zone vide" autour de votre élément. Vous pouvez donc utiliser les balises CSS suivantes:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;


1

Utilisez le CSS standard tab-size.

Pour insérer un symbole de tabulation (si vous utilisez une touche de tabulation standard, déplacez le curseur), appuyez sur Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

Mon préféré:

*{-moz-tab-size: 1; tab-size: 1;}

Regardez un extrait ou un exemple trouvé rapidement à la taille de l'onglet .

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}
<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>


0

Cela a fonctionné pour moi:

Dans mon CSS, j'ai:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

Ensuite, dans le HTML, j'utilise simplement mes onglets:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

0

La réponse de user8657661 est la plus proche de mes besoins (d'aligner les choses sur plusieurs lignes). Cependant, je n'ai pas pu faire fonctionner l'exemple de code comme prévu, mais j'avais besoin de le modifier comme suit:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

Si vous avez besoin de nombres alignés à droite, vous pouvez changer left:150pxen right:150px, mais vous devrez modifier le nombre en fonction de la largeur de l'écran (comme écrit, les nombres seraient à 150 pixels du bord droit de l'écran).


0

Vous pouvez le faire grâce au remplissage comme <span style="padding-left: 20px;">, vous pouvez vérifier plus de façons ici à - espace vide en html


-2

Voici un texte "Tabulation" (copier-coller): ""

Il peut apparaître différent ou pas un onglet complet en raison des limitations de réponse de ce site.


1
Je pense que vous devez formuler la réponse plus clairement. Voulez-vous dire copier et coller un espace de quelque part? je ne pense pas que cela fonctionnerait ici.
smilyface

1
Il y a une tabulation dans la source Markdown, mais pas dans la sortie HTML ici (c'est plutôt un espace unique).
Peter Mortensen
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.