seeseekey.net - Invictus Deus Ex Machina

Der pre Tag dient dazu einen Text wiederzugeben wie er eingegeben wurde. Das ist an sich auch ganz schön, kann aber bei kleinen Auflösungen oder einem responsiven Design zum Problem werden. Den dort wird entweder das Layout zerschossen oder der Inhalt des pre Tags durch eine overflow CSS Anweisung abgeschnitten. Abhilfe schafft hier:

pre
{
        white-space: pre-wrap;
}

im CSS. Dadurch wird der pre Tag im Zweifelsfall umgebrochen und bleibt somit lesbar.

Weitere Informationen gibt es unter:
http://www.css4you.de/Texteigenschaften/white-space.html
http://blog.bissinger.biz/zeilenumbruch-im-pre-tag/
http://de.selfhtml.org/html/text/praeformatiert.htm

2 Kommentare

  1. Ich verwende für pre meistens overflow: auto;. Das erzeugt bei Bedarf eine Scrollleiste im Pre-Block. Wenn der Text im pre-Tag unkontrolliert umgebrochen wird, siehts mitunter komisch aus und in der Praxis will man damit ja meistens Quellcode genauso wiedergeben, wie es Syntax verlangt.

    Falls der Wert auto nicht funktioniert (ist mir bei keinem aktuellen Browser bekannt), sorgt scroll dafür, dass auf jeden Fall eine Scrollleiste angezeigt wird — falls sie nicht benötigt wird, ist sie ausgegraut.

    Siehe z.B. http://www.css4you.de/overflow.html und http://www.css4you.de/example/overflow.html

    Antworten

    • Das Problem mit overflow:auto ist das es dann auf Mobilgeräten (z.B. Android) abgeschnitten wird, was ich nicht wollte deshalb die pragmatische Lösung 🙂

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.