Besoin d’un espace qui ne se casse pas en fin de ligne en HTML ? C’est très simple.
Ce guide vous donne le code à copier-coller et ses alternatives, sans blabla.
La solution directe : Insérer un espace insécable avec
Pour créer un espace insécable en HTML, le code le plus courant est . Son nom anglais est « non-breaking space », ce qui veut dire « espace qui ne casse pas ». Il existe aussi une alternative numérique qui fait exactement la même chose :  .
Ces codes, appelés entités HTML, forcent le navigateur à garder deux mots ou caractères ensemble sur la même ligne. C’est la méthode la plus simple et la plus fiable pour insérer un espace insécable dans votre texte.
Exemple concret
Sans espace insécable : Si la phrase arrive en fin de ligne, le texte peut se couper de manière incorrecte.
<p>Il reste 100 € sur le compte.</p>
Résultat possible : « 100 » à la fin d’une ligne et « € » au début de la suivante.
Avec un espace insécable : « 100 » et « € » resteront toujours collés.
<p>Il reste 100 € sur le compte.</p>
Résultat : Les deux éléments ne seront jamais séparés par un retour à la ligne.
Qu’est-ce qu’un espace insécable et quand l’utiliser ?
Un espace insécable est juste un caractère qui empêche un retour à la ligne automatique entre deux éléments. C’est une règle de typographie importante, surtout en français, pour que le texte reste lisible et propre.
Il faut l’utiliser dans plusieurs cas précis. Voici les situations où cet espace est nécessaire :
- La ponctuation haute française : Il faut toujours un espace insécable avant un point-virgule, un deux-points, un point d’interrogation ou un point d’exclamation.
Exemple : Que se passe-t-il ? - Les nombres et les unités : Pour ne pas séparer un nombre de son unité de mesure ou de sa devise.
Exemple : Une distance de 50 km ou un prix de 250 €. - Les titres de civilité et noms propres : On ne sépare pas un titre comme « M. » ou « Dr » du nom qui le suit.
Exemple : M. Martin est absent. - Les abréviations et acronymes : Pour garder les parties d’un nom de société ou d’une abréviation ensemble.
Exemple : La société XYZ SA.
Tableau complet des entités HTML pour créer des espaces
L’espace insécable est le plus connu, mais il existe plusieurs autres entités HTML pour créer des espaces de différentes tailles. Ces caractères sont utiles pour des mises en page plus fines, quand un espace normal ou insécable n’est pas suffisant.
Voici un tableau qui liste les différentes entités pour ajouter des espaces dans votre texte, avec leur nom et leur rendu visuel pour vous aider à choisir.
| Entité HTML | Description | Rendu visuel |
|---|---|---|
|
(non breaking space) un espace « insécable » | [ ] |
  |
(thin space) un espace fin | [ ] |
  |
(narrow no-break space) un espace fin insécable | [ ] |
  |
(en space) un double espace | [ ] |
  |
(em space) un quadruple espace | [ ] |
  |
(hair space) un espace aussi fin qu’un cheveu | [ ] |
  |
(punctuation space) un espace de ponctuation | [ ] |
  |
(numeric space) un espace numérique | [ ] |
  |
(three-per-em space) un tiers de la largeur d’un « em » | [ ] |
  |
(four-per-em space) un quart de la largeur d’un « em » | [ ] |
  |
(six-per-em space) un sixième de la largeur d’un « em » | [ ] |
Autres méthodes pour gérer les espacements en HTML et CSS
Les entités HTML ne sont pas la seule façon de gérer les espaces sur une page web. Il existe d’autres techniques, en HTML et surtout en CSS, pour contrôler la mise en page de votre texte.
La balise <pre> : préserver l’espacement d’origine
La balise HTML <pre> (pour « preformatted text ») est particulière. Elle affiche le texte exactement comme il est écrit dans le code, en conservant tous les espaces, les tabulations et les retours à la ligne.
Attention, cette balise est surtout utilisée pour afficher du code informatique. Elle n’est pas faite pour écrire des paragraphes normaux car le texte ne s’adapte pas à la largeur de l’écran.
Exemple de <pre>
Avec une balise <p> : Les espaces multiples sont ignorés.
<p>Du texte avec plusieurs espaces.</p>
Résultat : Du texte avec plusieurs espaces.
Avec une balise <pre> : Les espaces sont conservés.
<pre>Du texte avec plusieurs espaces.</pre>
Résultat : Du texte avec plusieurs espaces.
Les propriétés CSS pour un contrôle fin
Le CSS offre des outils puissants pour gérer les espacements, mais d’une manière différente. Ces propriétés ne créent pas d’espace « insécable », mais elles permettent de contrôler la mise en page autour et à l’intérieur des éléments.
text-indent: Ajoute un espace au début de la première ligne d’un paragraphe (une indentation).Exemple : p { text-indent: 2em; }marginetpadding: Ajoutent de l’espace à l’extérieur (margin) ou à l’intérieur (padding) d’un élément. C’est la base de la mise en page en CSS.Exemple : div { margin-left: 20px; padding: 10px; }content: "\0000A0";: Une technique plus avancée pour insérer un caractère via un pseudo-élément CSS (:beforeou:after). Le code\0000A0est la représentation de l’espace insécable.Exemple : .element:before { content: "\0000A0"; }
Cas pratique : Gérer les espaces insécables sur WordPress
Si vous utilisez WordPress, vous avez peut-être remarqué ce problème. WordPress est un CMS d’origine anglo-saxonne et ne gère pas bien la typographie française par défaut. Un point d’exclamation ou un deux-points se retrouve donc souvent seul en début de ligne, ce qui n’est pas correct.
Pour corriger ça, il existe deux solutions simples :
- L’édition manuelle : La méthode la plus directe. Il faut passer dans l’éditeur de code de votre article et ajouter vous-même les
aux bons endroits. - Les plugins : Il existe des extensions pour WordPress qui automatisent l’ajout des espaces insécables et corrigent d’autres règles typographiques françaises.
Pour un espace insécable en HTML, le code à retenir est . C’est utile pour la ponctuation, les nombres et les noms, afin d’éviter les coupures de ligne bizarres. Et si vous avez besoin de plus de contrôle, vous avez maintenant un tableau complet des autres espaces et des méthodes CSS pour gérer la mise en page de votre texte.
Commentaires
Laisser un commentaire