c'est connu
Les balises définissent du texte préformaté et une application courante consiste à représenter le code source informatique. Le texte enfermé dans un élément PRe conserve généralement les espaces et les sauts de ligne, mais malheureusement, lorsque vous écrivez du code dans une balise, si vous ne l'encapsulez pas manuellement, il le conservera pour vous sans modifier les sauts de ligne.
À l'heure actuelle, vous pouvez utiliser overflow:auto; (lorsque le code dépasse les limites du conteneur, la zone de défilement s'affiche), mais cette méthode ne convient pas à tous les navigateurs grand public, et certains navigateurs tronqueront directement le contenu dépassé.
Comme il n'y a pas beaucoup d'endroits où le code source est utilisé sur ce site, je ne me souciais pas vraiment de ce problème auparavant, un internaute enthousiaste a signalé ce problème sur QQ, alors quand j'ai changé de thème cette fois, j'ai regardé. pour une solution et je l'ai partagé.
pre { white-space: pre-wrap; /* CSS-3 */ white-space: -moz-pre-wrap; /* Mozilla, depuis 1999 */ white-space: -pre-wrap; 6 */ white-space: -o-pre-wrap; /* Opera 7 */ Word-wrap: break-word; /* Internet Explorer 5.5+ */} De : Création d'un retour à la ligne de texte préformaté en CSS3, Mozilla, Opera et IE
Cette solution CSS peut faire en sorte que le texte de la balise pre soit automatiquement renvoyé. Je l'ai testé sur tous les navigateurs dont je dispose, et ils prennent tous en charge IE6, IE7, IE8, Firefox, Opera, Safari et Chrome.
Ce n'est que lorsque vous réduisez la fenêtre à moins de 20 caractères qu'elle dépassera la bordure. De plus, j'ai vu des articles partageant cette technique CSS, disant qu'elle pouvait résoudre le problème du retour à la ligne des mots longs, mais je l'ai essayé et ça n'a toujours pas fonctionné.
-