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)

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)

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.