Balise HTML <nobr>
La balise <nobr> n'est pas standard. Découvrez le remplacement CSS moderne, white-space: nowrap, avec des exemples.
La balise <nobr> était destinée à empêcher le texte de se répartir sur plusieurs lignes — elle maintenait le contenu sur une seule ligne. Normalement, lorsqu'une ligne de texte est plus longue que son conteneur, le navigateur la coupe à la ligne suivante. <nobr> supprimait ce retour à la ligne automatique, de sorte qu'une barre de défilement horizontale apparaissait si la ligne était trop longue.
N'utilisez jamais <nobr> dans du nouveau code. Elle n'a jamais fait partie d'aucun standard HTML — ni HTML 4, ni HTML5, ni la spécification WHATWG HTML actuelle. Il s'est toujours agi d'une extension de navigateur non standard. Les navigateurs peuvent encore l'afficher pour des raisons de compatibilité ascendante, mais ils peuvent abandonner ce support à tout moment, et elle ne sera pas validée. Contrôlez le retour à la ligne avec la propriété CSS white-space à la place.
Cette page présente la méthode correcte et conforme aux standards pour empêcher le retour à la ligne du texte, puis documente la balise obsolète <nobr> afin que vous puissiez la reconnaître et la supprimer des anciens balisages.
Le remplacement moderne : white-space: nowrap
Pour maintenir le texte sur une seule ligne, définissez la propriété CSS white-space à nowrap sur l'élément. Il s'agit de l'équivalent direct et standard de <nobr>, qui fonctionne dans tous les navigateurs modernes.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.no-wrap {
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Example of white-space: nowrap</h1>
<p class="no-wrap">
It is an ordinary and very long text that is inconvenient to read, because it is written on one line and you have to scroll horizontally to read it.
</p>
</body>
</html>Comment white-space contrôle le retour à la ligne
La propriété white-space détermine comment le navigateur gère les espaces et les sauts de ligne à l'intérieur d'un élément. Ses principales valeurs :
normal— la valeur par défaut. Les séquences d'espaces sont réduites à un espace unique, et les lignes se coupent selon les besoins pour remplir le conteneur.nowrap— réduit les espaces commenormal, mais le texte ne se coupe jamais. La ligne continue jusqu'à ce qu'un<br>soit rencontré. C'est le remplacement de<nobr>.pre— les espaces et les sauts de ligne sont préservés exactement tels qu'ils sont écrits dans la source. Le texte ne se coupe pas (similaire à l'élément<pre>).pre-wrap— préserve les espaces et les sauts de ligne de la source, et coupe le texte lorsqu'il dépasse le conteneur.pre-line— préserve les sauts de ligne de la source mais réduit les autres espaces, et coupe selon les besoins.
Éviter le dépassement horizontal
Une ligne sans retour à la ligne peut dépasser le bord de son conteneur. Pour garder la page ordonnée, ajoutez une barre de défilement au conteneur avec la propriété overflow plutôt que de laisser la ligne déborder sur le reste de la page :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll-box {
white-space: nowrap;
overflow: auto; /* scrollbar appears only when needed */
width: 300px;
border: 1px solid #ccc;
padding: 8px;
}
</style>
</head>
<body>
<p class="scroll-box">
This long line stays on a single row, and the box scrolls horizontally instead of overflowing the page.
</p>
</body>
</html>Quand maintenir le texte sur une ligne — et quand ne pas le faire
white-space: nowrap est le bon choix lorsque le retour à la ligne briserait le sens ou la mise en page de contenus courts et atomiques :
- Cellules de tableau qui ne doivent pas couper une valeur sur plusieurs lignes (dates, prix, numéros de téléphone).
- Étiquettes de boutons et de badges, afin qu'une courte étiquette reste sur une seule ligne.
- Éléments de menu de navigation, pour que chaque lien reste intact.
- Numéros de téléphone, codes ou noms que vous souhaitez garder visuellement ensemble.
C'est le mauvais outil pour les longs textes courants. Forcer des paragraphes sur une seule ligne crée un défilement horizontal, difficile à lire. Pour du contenu long qui doit s'adapter, faites l'inverse — autorisez la coupure :
overflow-wrap: break-wordpermet au navigateur de couper un long mot autrement impossible à couper (comme une URL) uniquement lorsqu'il déborderait.word-breakcontrôle la façon dont les mots se coupent, y compris entre deux caractères quelconques pour le CJK ou les colonnes très étroites.
Pour suggérer un point de coupure optionnel à l'intérieur d'une longue chaîne (par exemple, une URL) sans en forcer un, utilisez l'élément HTML <wbr>.
La balise obsolète <nobr>
La balise <nobr> était une paire d'éléments : le contenu se trouvait entre la balise ouvrante <nobr> et la balise fermante </nobr>. Elle est présentée ici uniquement à titre de référence — ne l'écrivez pas dans du nouveau code.
Un texte ordinaire et très long sur une seule ligne — exemple obsolète avec <nobr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Non-standard. Use white-space: nowrap instead. -->
<nobr>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</nobr>
</body>
</html>Résultat
Étant donné que <nobr> est non standard, il ne sert à rien de le styliser ou de le scripter via les attributs globaux id/class — remplacez l'élément par un élément standard (tel qu'un <span> ou un <p>) portant white-space: nowrap, et appliquez vos attributs à cet endroit.