Vytvořte rámeček s posouváním textu pomocí CSS a HTML

An HTML rolovací rámeček je rámeček, který přidává posuvníky na pravou stranu a spodní část, když je obsah rámečku větší než rozměry rámečku. Jinými slovy, pokud máte pole, do kterého se vejde asi 50 slov, a máte text o 200 slovech, posouvací pole HTML umístí posuvníky nahoru, abyste viděli dalších 150 slov. Ve standardním HTML by to jednoduše vytlačilo nadbytečný text mimo rámeček.

Vytváření posouvání HTML je poměrně snadné. Musíte pouze nastavit šířku a výška prvku, který chcete posouvat, a poté použijte CSS vlastnost overflow k nastavení způsobu, jakým má rolování probíhat.

Co dělat s textem navíc?

Když máte více textu, než se vejde do prostoru vašeho rozložení, máte několik možností:

• Přepište text tak, aby byl kratší a aby se vešel.
• Nechte text proudit za hranice a doufejte, že se rozložení může podepřít.
• Odřízněte text tam, kde přetéká.
• Přidejte posuvníky (obvykle svisle pro text), aby se prostor posunul a zobrazil další text.

Nejlepší možností je obvykle poslední možnost: vytvořit rolovací textové pole. Pak lze přečíst další text, ale váš design není ohrožen.

HTML a CSS pro toto by byly:

text zde... 

The přepad: auto; řekne prohlížeči, aby přidal posuvníky, pokud jsou potřeba, aby text nepřekročil hranice div. Aby to ale fungovalo, potřebujete také vlastnosti stylu šířky a výšky nastavené na div, aby existovaly hranice k přetečení.

Text můžete také oříznout změnou overflow: auto; na přepad: skrytý; Pokud vynecháte vlastnost přetečení, text se rozlije přes hranice div.

Posuvníky můžete přidat k více než jen textu

Pokud máte velký obrázek, který byste chtěli zobrazit na menším prostoru, můžete kolem něj přidat posuvníky stejným způsobem, jako byste to udělali s textem.

V tomto příkladu je obrázek 400x509 uvnitř odstavce 300x300.

Tabulky mohou těžit z posuvníků

Dlouhé tabulky informací mohou být velmi obtížně čitelné velmi rychle, ale jejich vložením do divu omezené velikosti a poté přidáte vlastnost overflow, můžete vygenerovat tabulky se spoustou dat, která vám nezabírají extrémní prostor strana.

Nejjednodušší způsob je stejně jako u obrázků a textu, stačí přidat div kolem stolu, nastavit šířku a výšku tohoto div a přidat vlastnost overflow:

... 

Jedna věc, která se stane, když to uděláte, je obvykle vodorovná posuvná lišta, protože prohlížeč předpokládá, že chrom posuvných lišt překrývá tabulku. Existuje mnoho způsobů, jak to napravit změnou šířky stolu a dalších. Ale naše oblíbené je jednoduše vypnout vodorovné posouvání pomocí vlastnosti CSS 3 přetečení-x

Jen Přidej overflow-x: skrytý; k div, a tím se odstraní vodorovný posuvník. Nezapomeňte to otestovat, protože by mohl zmizet obsah.

Firefox podporuje použití značek TBODY pro přetečení

Jedna opravdu pěkná vlastnost prohlížeče Firefox je, že můžete použít vlastnost overflow na značkách vnitřní tabulky, jako je tbody and thead nebo tfoot. To znamená, že můžete nastavit posuvníky na obsahu tabulky a buňky záhlaví zůstanou ukotveny nad nimi. To funguje pouze ve Firefoxu, což je škoda, ale je to příjemná funkce, pokud vaši čtenáři používají pouze Firefox. Přejděte na tento příklad ve Firefoxu a podívejte se, co tím myslím.

... NamePhoneJennifer502-5366. 

...