Résoudre le problème du retour à la ligne automatique du contenu des balises pré-html

L'élément

e03b848252eb9375d56be284e690e873 définit le texte préformaté. Le texte enfermé dans un élément pre préserve généralement les espaces et les nouvelles lignes. Le texte sera également rendu dans une police à largeur fixe. Une application courante de la balise

e03b848252eb9375d56be284e690e873

Un problème que nous rencontrons souvent est que si un code contient une image ou une adresse de page Web, le code sera très long. En conséquence, la page sera étirée ou le code dépassera la limite. C'est très inconfortable. Si vous utilisez overflow:hidden, le code original sera masqué. Si vous utilisez overflow:auto, une barre de défilement apparaîtra, rendant le code peu pratique à lire.

Comment résoudre le problème du retour à la ligne automatique du contenu de e03b848252eb9375d56be284e690e873 :

1 Essayez d'abord d'utiliser : word-wrap : break-word. ; pour envelopper automatiquement le contenu. IE, OP, Chrome et Safari conviennent tous, mais FF est une tragédie.

Cliquez pour voir la démo

2. J'ai vérifié le style de navigateur par défaut de pré :

xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

tous ont ceci espace blanc : pré , Regardez la valeur de l'espace blanc :

la valeur décrit la valeur par défaut normale. Les espaces blancs sont ignorés par le navigateur. Les pré-blancs seront conservés par le navigateur. Il se comporte comme la balise e03b848252eb9375d56be284e690e873 le texte nowrap ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise 0c6dc11e160d3b678d68754cc175188a pre-wrap préserve les séquences d'espaces, mais enveloppe normalement les lignes. pre-line fusionne les séquences d'espaces mais conserve les nouvelles lignes. hériter spécifie que la valeur de l'attribut espace blanc doit être héritée de l'élément parent.

a un pré-enveloppement qui conserve les séquences d'espaces mais s'enroule normalement.

C'est tout. Il suffit d'ajouter le style :

pre {
white-space: pre-wrap;
word-wrap: break-word;
}

pour que le contenu de e03b848252eb9375d56be284e690e873

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!