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

L'élément

 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 </p>
<p><pre class="brush:php;toolbar:false"> </p>
<p>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 <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:hidden, le code original sera masqué. Si vous utilisez overflow:auto, une barre de défilement apparaîtra, rendant le code peu pratique à lire. </p>
<p>Comment résoudre le problème du retour à la ligne automatique du contenu de <pre class="brush:php;toolbar:false"> : </p>
<p>1 Essayez d'abord d'utiliser : <a href="http://www.php.cn/wiki/878.html" target="_blank">word-wrap</a> : break-word. ; pour envelopper automatiquement le contenu. IE, OP, Chrome et Safari conviennent tous, mais FF est une tragédie. </p>
<p>Cliquez pour voir la démo</p>
<p>2. J'ai vérifié le style de navigateur par défaut de pré : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

Copier après la connexion

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

 le texte nowrap ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise <br> 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 <a href="http://www.php.cn/wiki/169.html" target="_blank"> </a> doit être héritée de l'élément parent. </p><p> a un pré-enveloppement qui conserve les séquences d'espaces mais s'enroule normalement. </p><p>C'est tout. Il suffit d'ajouter le style : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">pre {
white-space: pre-wrap;
word-wrap: break-word;
}

Copier après la connexion