Unerwünschte Zeilenumbrüche in Code-Snippets verhindern

Preventing line breaks in <code> elements

Alex Chan zeigt, wie er unschöne Zeilenumbrüche in kurzen Inline-Code-Snippets auf seiner Website verhindert. Statt Bindestriche durch geschützte Varianten zu ersetzen, die das Kopieren verfälschen würden, nutzt er einen regulären Ausdruck, um betroffene <code>-Elemente zu identifizieren und mit einer CSS-Klasse zu versehen. Die Klasse setzt die CSS-Eigenschaft text-wrap: nowrap, sodass Browser die Snippets nicht mehr umbrechen. Eine pragmatische Lösung für ein typografisches Detail, das die Lesbarkeit verbessert, ohne den Code zu verändern.

Ich kann verstehen, warum das passiert – Browser suchen nach Zeichen, an denen sie Zeilen umbrechen können, und im Englischen gehören dazu auch Bindestriche.

Mehr von diesem Tag

2026-07-24