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:
The
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. 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í posun s vlastností CSS 3 přetečení-x . Jen Přidej 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.
Stoly mohou těžit z posuvníků
název Telefon Jennifer 502-5366
