Inhalte automatisch in die HTML-Pre-Tag-HTML-/Xhtml-Webseitenproduktion einschließen

Zu diesem Zeitpunkt können Sie overflow:auto; verwenden (wenn der Code die Grenze des Containers überschreitet, wird das Bildlauffeld angezeigt), diese Methode ist jedoch nicht für alle Mainstream-Browser geeignet und einige Browser kürzen den überschrittenen Inhalt direkt ab.

Wir alle wissen, dass das

-Tag  vorformatierten Text definieren kann. Eine häufige Anwendung ist die Darstellung von Computerquellcode. In einem pre-Element eingeschlossener Text behält normalerweise Leerzeichen und Zeilenumbrüche bei. Wenn Sie jedoch Code in ein 
-Tag schreiben, wird dieser auch für Sie beibehalten, wenn Sie ihn nicht automatisch umbrechen. 

Zu diesem Zeitpunkt können Sie overflow:auto; verwenden (wenn der Code die Grenze des Containers überschreitet, wird das Bildlauffeld angezeigt), diese Methode ist jedoch nicht auf alle gängigen Browser anwendbar Einige Browser kürzen überschüssige Inhalte direkt ab. 
标签里的文本换行(兼容IE, FF和Opera等)" src="http://files.jb51.net/do/uploads/allimg/090606/0242050.png"  style="max-width:90%">
Da es auf dieser Website nicht viele Orte gibt, an denen Quellcode verwendet wird, habe ich diesem Problem zuvor nicht viel Aufmerksamkeit geschenkt. Vor nicht allzu langer Zeit hat ein begeisterter Internetnutzer dieses Problem auf QQ gemeldet, also habe ich diese Zeit genutzt Um das Thema zu ändern und nach einem Plan zu suchen, teilen Sie ihn. 



Code kopieren
Der Code lautet wie folgt:
 
vor { 
weiß -space: pre-wrap; /* css-3 */ 
white-space: -moz-pre-wrap; Opera 4- 6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
word-wrap: break-word; /* Internet Explorer 5.5 */ 
} 


Diese CSS-Lösung kann den Text im Pre-Tag automatisch umbrechen. Ich habe sie in allen Browsern getestet, die ich habe, und sie werden alle unterstützt, einschließlich IE6, IE7, IE8, Firefox, Opera, Safari und Chrom. 
Nur ​​wenn Sie das Fenster auf eine Breite von weniger als 20 Zeichen verkleinern, wird die Grenze überschritten. 
 Darüber hinaus habe ich einige Beiträge gesehen, in denen diese CSS-Technik ebenfalls geteilt wurde und es hieß, dass sie das Problem des Zeilenumbruchs bei langen Zeilen lösen kann Worte, aber ich habe es versucht. Nach einer Weile hat es immer noch nicht funktioniert.