Vytvoření pole s posouváním textu pomocí CSS a HTML
Posunovací pole HTML je políčko, které přidává posuvníky na pravou a spodní stranu, pokud obsah krabice je větší než rozměry rámečku. Jinými slovy, pokud máte krabici, která se může hodit asi 50 slov a máte text 200 slov, v posuvníku HTML se umístí posuvníky tak, abyste viděli dalších 150 slov. Ve standardním HTML kódu, který by jednoduše posunul extra text mimo rámeček.
Vytváření HTML posunu je poměrně snadné. Potřebujete nastavit šířku a výšku elementu, který chcete posunout, a potom pomocí vlastnosti přetečení CSS nastavit, jak chcete, aby k rolování došlo.
Co dělat s extra textu?
Pokud máte více místa, než se vejde do rozvržení místa, máte několik možností:
- Přepište text tak, aby byl kratší a vyhovoval.
- Umožněte, aby text překročil meze a doufejme, že rozložení se může ohýbat a podpořit ho.
- Odřízněte text, na který přeteče.
- Přidejte posuvníky (obvykle vertikální pro text) tak, aby se místo posunovalo, aby se zobrazil další text.
Nejlepším řešením je obvykle poslední možnost: vytvořit textové pole se seznamem. Pak můžete ještě číst text, ale váš návrh není ohrožen.
HTML a CSS by to bylo:
Přetečení: auto; řekne prohlížeči, aby přidal posuvníkové lišty, pokud jsou potřebné k tomu, aby text neuměl překrývat hranice div. Ale aby to fungovalo, potřebujete také vlastnosti ve stylu šířky a výšky nastavené na div, aby existovaly hranice přetečení.
Text můžete také odříznout změnou přetečení: auto; přetečení: skryté ;. Pokud vynecháte vlastnost přetečení, text překryje hranice div.
Můžete přidat posuvníky více než jen text
Pokud máte velký obrázek, který chcete zobrazit v menším prostoru, můžete přidat kolem něj rolovací lišty stejně jako u textu.
V tomto příkladu je obrázek 400x509 uvnitř odstavce 300x300.
Stoly mohou těžit z posuvníků
Dlouhé tabulky informací mohou být velmi obtížné číst velmi rychle, ale jejich uvedením do div omezené velikosti a přidáním vlastností přetečení můžete vytvářet tabulky se spoustou dat, které na vaší stránce nezaberou extrémní prostor .
Nejjednodušší cesta je stejně jako u obrázků a textu, stačí přidat div kolem tabulky, nastavit šířku a výšku divu a přidat vlastnost přetečení:
Jedna věc, která se stane, když to uděláte, je vodorovná posuvná lišta, která se obvykle objevuje, protože prohlížeč předpokládá, že chromové posuvníky překrývají tabulku. Existuje mnoho způsobů, jak to vyřešit změnou šířky tabulky a dalších. Ale mým nejoblíbenějším je jednoduše vypnout horizontální rolování s přetečením vlastností CSS 3-x. Stačí přidat přetečení-x: skryté; na div, a to odstraní vodorovný posuvník. Ujistěte se, že to vyzkoušíte, jelikož může obsah zmizet.
Firefox podporuje používání značek TBODY pro přetečení
Jedna opravdu pěkná vlastnost prohlížeče Firefox je, že můžete použít vlastnost přetečení na tagy vnitřní tabulky jako tbody a thead nebo tfoot. To znamená, že můžete nastavit posuvníky na obsah tabulky a buňky záhlaví zůstanou zakotveny nad nimi. To funguje pouze ve Firefoxu , což je příliš špatné, ale je to hezká funkce, pokud vaše čtenáři používají pouze Firefox. Projděte si tento příklad ve Firefoxu, abyste zjistili, co tím myslím.
| 502-5366
|