Automatische Zeilenumbrüche in HTML-Pre-Tags

Wir alle wissen, dass das <pre>-Tag vorformatierten Text definieren kann. Eine häufige Anwendung ist die Darstellung von Computerquellcode. In dem im Pre-Element eingeschlossenen Text werden normalerweise Leerzeichen und Zeilenumbrüche beibehalten. Wenn Sie jedoch Code innerhalb des <pre>-Tags schreiben und ihn nicht manuell umbrechen, wird er leider auch für Sie beibehalten und nicht automatisch umbrochen.

Zu diesem Zeitpunkt können Sie overflow:auto; verwenden (wenn der Code die Containergrenze überschreitet, wird das Bildlauffeld angezeigt), aber diese Methode funktioniert nicht bei allen gängigen Browsern. Einige Browser schneiden den überschüssigen Inhalt direkt ab.

Da es auf dieser Website nicht viele Stellen gibt, an denen Quellcode verwendet wird, und ich diesem Problem zuvor nicht viel Aufmerksamkeit geschenkt habe, hat vor nicht allzu langer Zeit ein begeisterter Internetnutzer dieses Problem auf QQ gemeldet. Als ich dieses Mal das Design geändert habe, habe ich nach einer Lösung gesucht und sie geteilt.