Sowohl bei Wordpress, als auch im allgemeinen Umgang mit html habe ich oft die Frage erhalten, wie ich innerhalb des pre-Tags einen Zeilenumbruch forcieren – also erzwingen – kann.
Ziel ist es, dass die Scrollleiste am unteren Rand des Pre-Tags verschwindet und die Schrift sich der Größe des pre-Blocks anpasst, dabei bei Bedarf einen Zeilenumbruch macht um in den jeweilen Block vollständig reinzupassen.
Das ist zum Glück relativ leicht und per CSS (im Falle von Wordpress per Customizer – Zusätzliches CSS) umzusetzen.
Ihr definiert also per CSS euren pre Tag, könnt ihn dabei auch gleich frei gestalten (zB mit Größenangaben*, Hintergrund- und Schriftfarbe, Schriftgröße, Schriftart, Abstände usw) und fügt dann am Ende noch einen Codeschnipsel hinzu, der den Zeilenumbruch erzwingt.
*Aufgepasst! Wird der Block mit einer festen Höhe so eingestellt, dass er nicht genug Platz für den jeweiligen Inhalt bietet, führt das dazu, dass der Block scrollbar wird. Das ist jedoch je nach Design nicht direkt ersichtlich! So erscheinen oftmals die Scrollbalken erst, wenn man bereits mit der Maus / Tastatur begonnen hat in dem Block zu scrollen. Davor sind die Inhalte dann einfach nur abgeschnitten dargestellt.
Hier nun der CSS-Part welcher den Zeilenumbruch erzwingt:
pre {
white-space: pre-wrap;
}
Beachtet dabei bitte, dass die Blocks sich so nach unten hin deutlich ausdehnen können je nachdem wieviel Inhalt eure Pre-Tags enthalten, das kann unter Umständen für ein geändertes Seitendesign sorgen.