Comment effectuer automatiquement le pré-emballage des balises ?

Laissez le contenu de la balise

 s'enrouler automatiquement et se conformer aux normes du W3C (prise en charge de plusieurs navigateurs) </p>
<p>Par défaut, le contenu de la balise <pre /> le retour à la ligne s'il dépasse la plage. Le retour à la ligne se produira automatiquement, ce qui peut entraîner des problèmes lors de l'affichage ou de l'impression. </p>
<p>Ce qui suit fournit un code de style CSS conforme aux normes du W3C et prenant en charge plusieurs navigateurs : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">pre{white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

Copier après la connexion

La balise pre conservera le format du contenu HTML tel quel, mais si la largeur est trop grande, la page sera cassée. À ce stade, un retour à la ligne automatique est nécessaire pour aider :

Wrapping the pre tagMaking preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting, 
without cursing yourself when some of the content is too long and doesn't wrap:
pre {white-space: pre-wrap;      
white-space: -moz-pre-wrap; 
white-space: -pre-wrap;     
white-space: -o-pre-wrap;   
word-wrap: break-word;      
}

Il est préférable d'ajouter un DIV à la balise parent et de définir l'attribut CSS <. 🎜>: word-wrap: break-word; white-space: normal; Utiliser directement l'écriture de style :

<pre   
style="width:30px;word-break:   
break-all;   
word-wrap:break-word;border:1px   
solid  #555">    
asfasdfas    
dfasd    
fa    
sdfasdf  

Le code de sortie pré-formaté est utilisé dans l'article. Par défaut, le navigateur force le contenu de pre à être affiché sans sauts de ligne. Dans ce cas, le code semblera s'étendre en dehors de la page à mesure qu'il grandit. Avant, je forçais intentionnellement les sauts de ligne dans le code... Je suis fatigué. Aujourd'hui, je l'ai intentionnellement recherché sur Google et j'ai trouvé :

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

Après les tests, sauf pour IE [en utilisant actuellement 6], autre Okay. .. J'étais déprimé, puis j'ai ajouté width:600px; et puis, ok, la ligne a été modifiée, mais la position a en fait été dérivée. Cela ressemble à ceci : le code est entré, mais le récit en dessous est sorti. En d’autres termes, définir cette largeur n’est pas une bonne méthode. Il n’existe pratiquement aucune autre méthode qui ne modifie pas directement le CSS. Ensuite, j'ai regardé le CSS ci-dessus et je me suis demandé pourquoi j'utilise des espaces pour définir d'autres choses mais pas pour définir IE. Ce n'est pas qu'IE ne le prend pas en charge. . Alors ajoutez-le simplement [J'ai parcouru les 5 premières pages de Google et je n'ai pas trouvé de solution qui pourrait être résolue en changeant le CSS...].

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;
white-space : normal ;      
}

Quant à celui utilisé sur ce site, IE est séparé des autres, car les espaces blancs affectent également les autres au final....

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!