Nous savons tous que la balise <pre> peut définir du texte préformaté et qu'une application courante consiste à représenter le code source d'un ordinateur. Le texte enfermé dans un élément pre conserve généralement les espaces et les nouvelles lignes, mais malheureusement, lorsque vous écrivez du code dans une balise <pre>, si vous n'encapsulez pas manuellement les nouvelles lignes, il sera également conservé pour vous au lieu du saut 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é.
| pré { espace blanc : pré-enveloppement ; /* css-3 */ espace blanc : -moz-pre-wrap ; /* Mozilla, depuis 1999 */ espace blanc : -pre-wrap /* Opera 4-6 */ espace blanc : -o-pre-wrap; /* Opera 7 */ retour à la ligne : coupure de mot ; /* Internet Explorer 5.5+ */ } |
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.
Cela ne sort des limites que si vous réduisez la fenêtre à moins de 20 caractères de large.