Wir alle wissen, dass das <pre>-Tag vorformatierten Text definieren kann und eine häufige Anwendung darin besteht, Computerquellcode darzustellen. In einem pre-Element eingeschlossener Text behält normalerweise Leerzeichen und Zeilenumbrüche bei. Wenn Sie jedoch Code innerhalb eines <pre>-Tags schreiben und die Zeilenumbrüche nicht manuell umbrechen, bleiben diese leider auch anstelle des Zeilenumbruchs erhalten.
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.
Da es auf dieser Website nicht viele Orte gibt, an denen Quellcode verwendet wird, hat mich dieses Problem vorher nicht wirklich interessiert. Vor nicht allzu langer Zeit hat ein begeisterter Internetnutzer dieses Problem auf QQ gemeldet. Als ich dieses Mal das Thema geändert habe, habe ich nachgeschaut für eine Lösung und teilte sie mit.
| vor { Leerraum: pre-wrap; /* css-3 */ Leerzeichen: -moz-pre-wrap; /* Mozilla, seit 1999 */ Leerzeichen: -pre-wrap; /* Opera 4-6 */ Leerzeichen: -o-pre-wrap; /* Opera 7 */ Zeilenumbruch: break-word; /* Internet Explorer 5.5+ */ } |
Mit dieser CSS-Lösung kann der Text im Pre-Tag automatisch umbrochen werden. Ich habe sie in allen Browsern getestet, die ich habe, und alle unterstützen IE6, IE7, IE8, Firefox, Opera, Safari und Chrome.
Der zulässige Bereich wird nur dann überschritten, wenn Sie das Fenster auf eine Breite von weniger als 20 Zeichen verkleinern.