Podpora CSS vlastnosti overflow:
Overflow: none (CSS1 varianta), text by měl přetékat rámeček a i přes následující objekty na stránce,
ve Firefoxu 2 a konečně i v IE7 OK. V Opeře ale tato vlastnost funguje jen s libovolnou deklarací DTD (bez ní nikoliv), IE6 nadefinovaný box automaticky
zvětší na výšku a text nepřetéká.
<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: none">
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
Overflow: visible (CSS2 varianta), podpora stejná jako u overflow: none.
<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: visible">
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
Overflow: hidden, text je oříznut podle velikost rámečku, všude OK.
<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: hidden">
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
Overflow: scroll, v rámečku jsou vždy zobrazeny rolovací pásy, všude OK. IE zobrazí rolovací pásy dokonce i barevně
jako na celé stránce. Tento efekt funguje i v Opeře 9, ale pouze v případě, že není použita DTD deklarace.
<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: scroll">
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
Overflow: auto, v rámečku jsou zobrazeny rolovací pásy jen pokud jsou potřeba, všude OK.
<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: auto">
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
Overflow: auto s rolovacím pásem vlevo, nefunguje v Opeře, ve Firefoxu ano, ale celý rámeček se přesune na pravou stranu obrazovky, v IE OK.
<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: auto; unicode-bidi:bidi-override; direction:rtl">
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
Overflow: auto, rolovací pás je vlevo (verze pro Firefox). Vlastností margin: 0px auto 0px 0px je upraveno zobrazení rámečku vlevo,
nastavení okrajů margin: 0px auto by zobrazilo rámeček uprostřed obrazovky.
<div style="margin: 0px auto 0px 0px; border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: auto; unicode-bidi:bidi-override; direction:rtl">
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text
Podpora pseudoelementů p:first-line a p:first-letter.
Tento odstavec by měl mít zleva odsazení, modrý první řádek a měl by mít první písmeno
2x větší (správná iniciála to ale není, tu je lepší řešit CSS vlastností
float:left, viz následující příklad). Funguje již celkem dobře všude, odsazení je ale nutné řešit standardní deklarací
prvku, např. <p style="text-indent:2em"> (následující odstavec), protože deklarace pomocí pseudoelemenu p:first-line {text-indent: 2em}
záhadně nikde nefunguje (tento odstavec), barva (p:first-line {color: blue}) a
první písmeno (p:first-letter {font-size: 200%}) fungují dobře.
Tento odstavec by měl mít zleva odsazení, modrý první řádek a měl by mít první písmeno
2x větší (správná iniciála to ale není, tu je lepší řešit CSS vlastností
float:left, viz následující příklad). Funguje již celkem dobře všude, odsazení je ale nutné řešit standardní deklarací
prvku, např. <p style="text-indent:2em"> (tento odstavec), protože deklarace pomocí pseudoelemenu p:first-line {text-indent: 2em}
záhadně nikde nefunguje (předchozí odstavec), barva (p:first-line {color: blue}) a
první písmeno (p:first-letter {font-size: 200%}) fungují dobře. V IE je ovšem odsazení mnohem větší než v Opeře a Firefoxu,
je to způsobeno hodnotou 2em, kterou IE nastaví podle prvního zvětšeného písmene. Někdy se mi ve Firefoxu ale první písmeno
v tomto odstavci nezvětší při prvním načtení stránky, zkuste stránku aktualizovat, pak už je vše v pořádku.
Tento odstavec by měl mít na začátku typograficky správnou iniciálu.
Tento efekt nejlépe vyřešíme CSS vlastností float:left a nastavením velikosti a řádkování.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
Tento odstavec by měl mít na začátku iniciálu.
<span style="float:left; width: .7em; font-size: 4em; line-height: 83%">T</span>ento odstavec by měl mít na začátku ...