communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel HTML > Comment effectuer automatiquement le pré-emballage des balises ?

Comment effectuer automatiquement le pré-emballage des balises ?

黄舟

Libérer： 2017-07-08 11:52:12

original

4394 Les gens l'ont consulté

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&#39;s you use the pre tag to keep the formatting, 
without cursing yourself when some of the content is too long and doesn&#39;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;      
}

Copier après la connexion

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

Copier après la connexion

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;}

Copier après la connexion

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 ;      
}

Copier après la connexion

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!

Étiquettes associées：

换行标签自动

source：php.cn

Article précédent：Résoudre le problème du retour à la ligne automatique du contenu des balises pré-html Article suivant：Laissez le texte de la balise

 s'enrouler automatiquement

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur