Moyens possibles:
<pre> ... </pre>
ou
style="white-space:pre"
Rien d'autre?
Moyens possibles:
<pre> ... </pre>
ou
style="white-space:pre"
Rien d'autre?
mais pour faire un onglet?
&tab;
, mais j'ai trouvé ce petit extrait de js sur github (essentiellement, recherchez et remplacez pour en créer cinq
de suite) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
Réponses:
Dans les cas où la largeur / hauteur de l'espace est au-delà,
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>
Vous pouvez utiliser
pour les espaces, <
pour <
(inférieur à, numéro d'entité <
) et >
pour >
(supérieur à, numéro d'entité >
).
Une liste complète peut être trouvée dans Entités HTML .
Essayez  
.
Selon la documentation sur les caractères spéciaux :
Les entités de caractère
 
et 
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.
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>
#tab
par .tab
et 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 .
Types de Spaces
HTML
Crée quatre espaces entre le texte-  
Crée deux espaces entre le texte -  
Crée un espace régulier entre le texte -
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]
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>
La première ligne de ce paragraphe sera en retrait d'environ cinq caractères, semblable à un retrait tabulé.
Voir Comment utiliser HTML et CSS pour créer des onglets et des espacements pour plus d'informations.
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>
Et ma capture d'écran ...
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 :)
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,
vous permet de créer plusieurs espaces qui sont visibles sur une page Web et pas seulement dans le code source.
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;
Vous pouvez utiliser ce code  
pour ajouter un espace dans le contenu HTML. Pour l'espace de tabulation, utilisez-le 5 fois ou plus.
Consultez un exemple ici: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace
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>
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
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:150px
en 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).
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
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.