Überlange Codezeilen kürzen
Und wieder mal etwas von der HTML/CSS Front. Und zwar habe ich beim erstellen des neuen Designs mit der festen Breite bemerkt, dass gewisse Texte (hauptsächlich Code) zu lang für das Design ist. Sprich, der Code ragt zu weit nach rechts.
Hier ein Beispiel von diesem Artikel.

Eine Möglichkeit um das Problem zu lösen wäre das Umbrechen des Textes nach einer bestimmen Anzahl von Buchstaben. Bei einer Schriftart mit einer festen Breite wie Courier würde das auch recht gut funktionieren. Nur macht das den Code völlig unleserlich, wenn da einfach irgendwo umgebrochen wird.
Es muss also eine andere Lösung her. Das CSS Element Overflow bietet sich da an. Mit der Angabe scroll kann man definieren, dass es um das Div Element Scrollbalken hat. Dadurch ist das Element nicht breiter als es sollte. Nur haben so auch Div Element die nicht zu breit sind Scrollbalken und das sieht wiederum schlecht aus.
Mit overflow:auto; kann man dem Browser die Wahl überlassen. Und hier scheinen sich die meisten Browser mal mehr oder weniger einig zu sein. Div Elemente die nicht zu breit sind habe keine Scrollbalken, diejenigen die zu breit sind haben aber Scrollbalken:

Dies funktioniert im Firefox, Opera und im IE 6 & 7. Andere Browser habe ich nicht getestet. Der einzige Unterschied ist, dass der IE auch vertikale Scrollbalken anzeigt, obwohl diese nicht nötigt wären. Firefox und Opera verzichten darauf, wie es sich gehört.
Hier ein Beispiel von diesem Artikel.

Eine Möglichkeit um das Problem zu lösen wäre das Umbrechen des Textes nach einer bestimmen Anzahl von Buchstaben. Bei einer Schriftart mit einer festen Breite wie Courier würde das auch recht gut funktionieren. Nur macht das den Code völlig unleserlich, wenn da einfach irgendwo umgebrochen wird.
Es muss also eine andere Lösung her. Das CSS Element Overflow bietet sich da an. Mit der Angabe scroll kann man definieren, dass es um das Div Element Scrollbalken hat. Dadurch ist das Element nicht breiter als es sollte. Nur haben so auch Div Element die nicht zu breit sind Scrollbalken und das sieht wiederum schlecht aus.
Mit overflow:auto; kann man dem Browser die Wahl überlassen. Und hier scheinen sich die meisten Browser mal mehr oder weniger einig zu sein. Div Elemente die nicht zu breit sind habe keine Scrollbalken, diejenigen die zu breit sind haben aber Scrollbalken:

Dies funktioniert im Firefox, Opera und im IE 6 & 7. Andere Browser habe ich nicht getestet. Der einzige Unterschied ist, dass der IE auch vertikale Scrollbalken anzeigt, obwohl diese nicht nötigt wären. Firefox und Opera verzichten darauf, wie es sich gehört.