Les valeurs des balises HTML <pre> ont des barres de défilement horizontales, comment les formater?
Ceci est ma page de blog. Certains de mes messages ont des blocs de code C#. Pour cela, j'utilise les tags <'pre'>. La largeur de la balise pre est de 100% et sa couleur d'arrière-plan. Cependant, le texte s'en est écarté comme dans l'image ci-dessous. Comment puis-je surmonter cela? Je ne veux pas de barre de défilement en bas.
Il y a quelques solutions:
Le plus simple est de placer des sauts de ligne dans le texte. Ce n'est probablement pas ce que vous voulez, car cela laissera de grandes marges droites ou provoquera toujours des barres de défilement, à moins que la fenêtre du navigateur ne soit de la bonne taille.
Une autre consiste à utiliser white-space:pre-wrap; dans le CSS pour votre balise <pre>. Cela entraînera le texte dans une nouvelle ligne si nécessaire, tout en préservant tous les espaces présents dans la source. Voir http://www.w3schools.com/cssref/pr_text_white-space.asp pour plus d'informations sur cette propriété CSS.
Si vous ne souhaitez pas que des sauts de ligne soient ajoutés (soit manuellement, soit par le retour à la ligne automatique), vous pouvez utiliser l'une des propriétés CSS suivantes pour votre balise <pre>:
overflow-x:hidden;Ceci coupera simplement le texte qui dépasse du bord droit. Ce ne sera pas visible du tout.overflow-x:scroll;Cela fera apparaître des barres de défilement dans votre page Web lorsque le texte s'étend au-delà du bord droit. Cela empêchera toute la page de devenir si large que des barres de défilement apparaissent en bas. Voir http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll pour un exemple.
Vous pouvez utiliser certaines propriétés CSS:
pre {
display: flex;
white-space: normal;
Word-break: break-Word;
}
Facultativement, si <pre> est à l'intérieur de <span>:
span pre { display: inline-flex; }
ajouter du style:
pre {
white-space: pre-wrap;
Word-break: break-Word;
}