nicht angemeldet
Hallo Eckhart,
Wie sollte ein Browser ein ewig langes Wort nach w3c korrekt interpretieren? Soll er einen automatischen Umbruch an einer zufälligen Stelle machen oder soll er das Wort in eine Zeile schreiben, unabhängig davon, ob man quer scrollen muss?
Jain. Letzteres kommt am ehesten hin.
Beispiel:
Das hier soll die Box, die von <body> erzeugt wird, sein:
+-------------------------------+
| |
| |
| |
| |
| |
+-------------------------------+
Wenn das Wort zu lange ist, dann passiert folgendes:
+-------------------------------+
| fksökfölksöfkösklöskölksölfköslkölfksöklsf
| |
| |
| |
| |
+-------------------------------+
<######------------------------->
Die Box wird *nicht* größer, das Wort "fließt" jedoch raus. (overflow) Da die Box von <body> jedoch nicht den Anzeigebereich bestimmt, bekommt der *Anzeigebereich* (nicht jedoch <body>!) Scrollbalken. (das <###-----> soll der Scrollblaken sein)
Man kann dies auch unterbinden, indem man mit CSS overflow: hidden; anwendet:
+-------------------------------+
| fksökfölksöfkösklöskölksölfkös|
| |
| |
| |
| |
+-------------------------------+
Dann wird das Wort abgeschnitten.
Man kann auch overflow:scroll verwenden:
+-------------------------------+
| fksökfölksöfkösklöskölksölfkös|
| |
| |
| |
|<####------------------------->|
+-------------------------------+
Hier bekommt <body> selbst den Scrollbalken. (und nicht der Anzeigebereich)
Bei Absätzen sieht man das ganze noch deutlicher:
+------------body---------------+
| +------------p--------------+ |
| | fksökfölksöfkösklöskölksölfköslkölfksöklsf
| +---------------------------+ |
| |
| |
| |
+-------------------------------+
<######------------------------->
Beispiel: http://www.christian-seiler.de/temp/test-element-width-1.html (der Umbruch bei den Leerzeichen wurde mit CSS verhindert, um es zu verdeutlichen) Achtung: Das Beispiel solltest Du Dir mit Mozilla oder Opera anschauen, im IE funktioniert es nicht. Ziehe das Fenster einfach kleiner, dann siehst Du es. (Die Breite des Absatzes <p> wird hier durch die Breite von <body> begrenzt, <body> ist so breit wie die zur Verfügung stehende Fläche des Anzeigebereichs; trotzdem erscheinen Scrollbalken)
Wenn Du nun Boxen hast, die *nicht* von Blockelementen erzeugt werden, dann sieht die Sache anders aus:
Bei Tabellenzellen wird der Tabellenlayoutalgorithmus verwendet. Wenn man jetzt von table-layout: auto; ausgeht (also nicht table-layout: fixed;) dann wird die benötigte Mindestbreite des Inhalts der Tabellenzelle berechnet. Danach wird die Breite der Tabellenzelle genommen, die sie durch Beschränkungen bekommen hätte. Diese beiden Größen werden verglichen. Die größere "gewinnt". (Wenn der Inhalt also kleiner als die verfügbare Breite sein kann, dann wird die verfügbare Breite genommen, wenn der Inhalt größer sein muss, dann wird die Mindestbreite des Inhalts genommen. Dabei wird dann die komplette Tabelle ausgedehnt. Bei einer ein-Tabellenzelle-Tabelle sähe das ganze dann so aus:
+------------body---------------+
| +-----------------------table--------------------+
| | +-----------------------td-------------------+ |
| | | fksökfölksöfkösklöskölksölfköslkölfksöklsf | |
| | +--------------------------------------------+ |
| +------------------------------------------------+
| |
| |
+-------------------------------+
<######------------------------->
<body> wird wie gesagt nicht ausgedehnt, da der ganz oben erwähnte Algorithmus darauf angewendet wird. Die Tabell wird jedoch im Gegensatz zum Absatz ausgedehnt.
Soweit zur Theorie. Praktisch gesehen verhält sich der IE falsch. (aus der Sicht des Standards) Dort wird die Box, die das Wort enthält, automatisch mit ausgedehnt, wie bei einer Tabelle.
Ich hoffe, ich konnte Dir weiterhelfen.
Viele Grüße,
Christian
Der Standard dazu: http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping