HTML : comment faire un saut de ligne '\n' ?

Dans le langage HTML, par défaut, les retours à la ligne classiques, correspondants à la combinaison "\n", ne sont pas interprétés. Il est nécessaire de les remplacer par la balise <br/> ou de structurer le texte en paragraphe avec la balise <p> pour obtenir le même résultat. Il est cependant possible d'interpréter les retours à la ligne et même les tabulations avec une balise spécifique ou bien avec une propriété CSS.

La balise HTML <pre> permet d'afficher le texte tel qu'il est saisi à l'intérieur de la balise. Les retours à la ligne mais également les tabulations seront interprétés pour être visibles à l'écran.

Voici mon texte
Voicimontexte Voici mon texte

Le langage CSS fournit également une propriété indiquant au navigateur d'interpréter les retours à la ligne et tabulations. Il s'agit de la propriété "white-space". Cette propriété CSS apporte plus de nuances car elle possède différentes valeurs possibles. En indiquant la valeur "pre-line", les retours à la ligne seront pris en compte mais les tabulations seront ignorées. Avec la valeur "pre-wrap", les tabulations et retours à la ligne sont pris en compte mais les multiples espaces sont réduits pour n'avoir qu'un seul espace maximum entre les mots. Pour tout prendre en compte comme le fait la balise <pre>, il faut indiquer la valeur "pre".

<div style="white-space:pre-line;">
Voici    mon
texte
</div>
<!-- résultat : -->
Voicimon
texte
<div style="white-space:pre-wrap;">
Voici    mon
texte  espacé
</div>
<!-- résultat : -->
Voici    mon
texte espacé
<div style="white-space:pre">
Voici    mon
texte
</div>
<!-- résultat : -->
Voici    mon
texte

Autour du même sujet

HTML : comment faire un saut de ligne '\n' ?
HTML : comment faire un saut de ligne '\n' ?

Dans le langage HTML, par défaut, les retours à la ligne classiques, correspondants à la combinaison "\n", ne sont pas interprétés. Il est nécessaire de les remplacer par la balise <br/> ou de structurer le texte en paragraphe avec la balise <p> pour...