HTML pre : conserver les espaces et gérer les longues lignes

HTML <pre> marque une zone de texte préformaté qui conserve les espaces et les sauts de ligne. Combinez-le avec <code> pour le code source, et utilisez CSS white-space: pre-wrap lorsque les longues lignes doivent s’adapter à la largeur disponible.

Différence entre pre et les paragraphes ordinaires

Les paragraphes ordinaires combinent les espaces consécutifs et les sauts de ligne dans la source selon le CSS par défaut. La balise pre maintient cet espacement par défaut, ce qui la rend adaptée pour le code avec indentation, les journaux et le texte où un espacement cohérent est important. La police par défaut est généralement à chasse fixe, mais les polices et la gestion des espaces peuvent être modifiées avec le CSS.

Vous pouvez aligner des visuels de type tableau en utilisant des espaces, mais cela ne fournit pas les relations réelles de lignes et de colonnes d'un tableau. Utilisez l’élément table pour des données comparatives, et lorsque vous transmettez un sens avec de l'espacement comme dans l'art ASCII, fournissez des explications qui peuvent être comprises par les lecteurs d'écran.

Exemple complet : Préservation des espaces et gestion des lignes longues

Enregistrez le document suivant sous le nom pre-demo.html et ouvrez-le dans un navigateur. Enregistrez le fichier en UTF-8, et aucune bibliothèque externe n'est nécessaire. Le défilement horizontal et le retour à la ligne ont été appliqués séparément à la même longue chaîne.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer les espaces et les sauts de ligne avec pre</title>
  <style>
    body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
    pre { padding: 1rem; background: #eef2f4; }
    .scroll { overflow-x: auto; }
    .wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Espaces et sauts de ligne</h1>
  <p>one    two
    three</p>
  <pre>one    two
    three</pre>
  <h2>Défilement horizontal</h2>
  <pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>Retour à la ligne</h2>
  <pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>Afficher le code source HTML</h2>
  <pre class="scroll"><code>&lt;p&gt;Hello &amp; welcome&lt;/p&gt;</code></pre>
</body>
</html>

Le premier paragraphe se fusionne en une seule ligne selon la gestion par défaut des espaces, et l’élément pre suivant conserve les quatre espaces entre les mots one et two ainsi que les quatre espaces avant le mot three. Lorsque l'écran est rétréci, l'exemple de défilement obtient un défilement horizontal, et l'exemple de retour à la ligne casse même les mots longs sur la ligne suivante. Dans la zone d'affichage du code source HTML, <p>Hello & welcome</p> apparaît en texte sous forme de balise.

Le HTML à l'intérieur de pre est également interprété.

L’élément pre n’est pas un élément qui empêche l'interprétation HTML. Si vous écrivez une balise <strong> à l'intérieur, la signification de la balise est appliquée. Pour afficher le code source HTML en texte, échappez < en < et & en &. Le dernier exemple de l'ensemble du document ci-dessus utilise ce principe.

Le premier saut de ligne immédiatement après la balise de début pre est supprimé par le parseur HTML. Les sauts de ligne suivants et l'indentation dans le code sont conservés, donc vérifiez la position de départ réelle du texte pour vous assurer que les espaces pour l'alignement du document n'apparaissent pas à l'écran. Lors de l'affichage dynamique du code, vous pouvez insérer la chaîne en utilisant textContent au lieu de innerHTML pour empêcher qu'elle soit interprétée comme des balises.

Choses à vérifier lorsque le retour à la ligne automatique ne se produit pas

Si vous spécifiez uniquement overflow-wrap et conservez le white-space: pre par défaut, les retours à la ligne souhaités peuvent ne pas apparaître. Pour préserver les espaces et les retours à la ligne tout en effectuant un renvoi à la ligne à la limite de l'écran, appliquez pre-wrap, et pour découper de longues chaînes sans espaces, spécifiez également overflow-wrap. À l'inverse, si vous devez maintenir une structure sur une seule ligne pour le code, conservez pre et fournissez un défilement interne avec overflow-x: auto.

pre préserve la mise en page du texte, et code indique que le contenu est du code. L'utilisation des deux ensemble ne génère pas automatiquement de coloration syntaxique, et un surligneur ou un CSS séparé est nécessaire. Au lieu de se fier aux anciens attributs width et wrap, ajustez l'affichage avec le CSS. Pour des conditions détaillées, référez-vous aux définitions de pre dans la norme norme HTML : élément pre et au document référence MDN de pre.