Comportement étrange avec la balise <pre>

Bonjour à vous,

J'utilise pour la première fois la balise <pre> et je ne comprends pas son comportement. Avant, j'utilisais la balise <code> mais j'ai besoin de conserver les nombreux espaces et <pre> permet de les garder ce que <code> ne permet pas.

Voici le code HTML :

<div class="exemple_de_code sans_fond">
					<pre>
						1   &lt;!DOCTYPE html>
						2   &lt;html>
						3   &lt;head>
						4      <span class="mise_en_avant">&lt;base href="http://www.google.fr"></span>
						5   &lt;/head>
						6   &lt;body>
						7      <span class="mise_en_avant">&lt;a href="grphp">Aller sur Google Groupes&lt;a></span>
						8   &lt;/body>
						9   &lt;html>
					</pre>
</div>

Ce que je ne comprends pas c'est d'abord pourquoi quand on utilise l'indentation normale du code HTML, le résultat ne concorde pas. Voici ce que j'obtiens avec le code HTML du dessus :

Pour que les chiffres soient proches de la marge de gauche, je suis obligé d'enlever l'indentation dans la structure HTML. Puis, pourquoi des lignes débordent de l'encadré violet ? Le surplus de texte devrait normalement passer à la ligne. Voilà ce que j'obtiens sur un affichage smartphone :


Quelqu'un saurait m'expliquer pourquoi l'indentation n'est pas respectée et pourquoi une ligne trop longue continue en débordant de l'encadré au lieu de passer à la ligne ?

Merci pour votre aide
Modifié par ObiJuanKenobi (09 Oct 2022 - 15:22)

Salut,

Le principe de la balise pre c'est justement de conserver l'aspect du code, l'indentation y compris. C'est la limite de vouloir faire cela uniquement avec du HTML car la balise pre va conserver tel quel l'indentation. En HTML pur il va falloir faire un retour disgracieux à la ligne.

Pour rendre sécable le code dans la balise pre, utilise ceci :

white-space: pre-wrap

Un exemple complet ici : Code Blocks. L'inspecteur {Chrome/Firefox} est ton ami

Merci Olivier, ça marche maintenant, le texte passe à la ligne automatiquement.

J'ai trouvé une solution au problème de l'indentation. Au lieu d'encapsuler les lignes de code dans une seule balise <pre>, j'ai placé <pre> sur chaque ligne de code, comme ceci :

<div class="exemple_de_code sans_fond">
	<pre>1   &lt;!DOCTYPE html></pre>
	<pre>2   &lt;html></pre>
	<pre>3   &lt;head></pre>
	<pre>4      <span class="mise_en_avant">&lt;base href="http://www.google.fr"></span></pre>
	<pre>5   &lt;/head></pre>
	<pre>6   &lt;body></pre>
	<pre>7      <span class="mise_en_avant">&lt;a href="grphp">Aller sur Google Groupes&lt;a></span></pre>
	<pre>8   &lt;/body></pre>
	<pre>9   &lt;html></pre>
</div>

Comme ça, je conserve l'indentation normale dans la structure HTML qui ne se répercute pas dans le résultat final. Mais je me demande si c'est catholique. Qu'en pensez-vous ?
Modifié par ObiJuanKenobi (11 Oct 2022 - 06:48)

Bonjour,

Tu devrais pouvoir enlever l'indentation avec une seule balise pre en utilisant la valeur pre-line pour la propriété white-space.
https://jsfiddle.net/o4tny5hs/

Merci Pitet pour ta réponse mais cette propriété supprime à la fois l'indentation et les espaces en trop. Or, j'ai besoin de garder les espaces mais pas l'indentation.

En effet, ma proposition ne répond pas à ton problème, au temps pour moi.

Je ne vois pas d'autres solutions en html et css.
A ta place, j'aurais utilisé ta solution d'encapsuler chaque ligne dans une balise <pre> ou j'aurais enlevé les espaces en début de ligne dans le code source html.

Si on veut vraiment conserver les espaces dans le code source html et ne pas encapsuler chaque ligne, il faudrait à priori se tourner vers une solution en javascript.