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

The best protection against click fraud.

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.

HTML kód
Hamza TArkkol / Getty Images

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.

instagram viewer

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. 
... 

Formát

mlaapaChicago

Vaše citace

Kyrnin, Jennifer. "Rolovací rámeček HTML." ThoughtCo, květen. 14, 2021, thoughtco.com/html-scroll-box-3466228.Kyrnin, Jennifer. (2021, 14. května). Rolovací rámeček HTML. Citováno z https://www.thoughtco.com/html-scroll-box-3466228Kyrnin, Jennifer. "Rolovací rámeček HTML." ThoughtCo. https://www.thoughtco.com/html-scroll-box-3466228 (zpřístupněno 23. června 2021).

  • Dva muži kódující na počítačích

    Jak stylovat IFrame pomocí CSS

  • Programovací ilustrace

    Jak používat CSS k vycentrování obrázků a jiných HTML objektů

  • Člověk dělá webdesign na stůl.

    Jak vytvořit rozložení ve 3 sloupcích v CSS

  • Tablet zobrazující zprávy na stole

    Jak plovoucí obrázek napravo od textu

  • Pracovníci používající software ke kalibraci pružin v kanceláři

    Přidávání obrázků na webové stránky pomocí HTML

  • Muž v brýlích na telefonu pomocí přenosného počítače

    Jak vložit řádky do HTML pomocí HR tagu

  • ženské webový vývojář pracující na počítači

    Jak plovoucí obrázek nalevo od textu na webové stránce

  • Různé nádoby a počítačové obrazovky, zdánlivě naplněné tekutinou, název: Obsah je jako voda

    Rozvržení s pevnou šířkou versus tekutá rozvržení

  • Žena při pohledu na zeď s kódem

    Vytváření posouvatelného obsahu v HTML5 a CSS3 bez MARQUEE

  • Fotografie kaskádového proudu s vodoznakem

    Jak vytvořit vodoznak v aplikaci Microsoft Publisher

  • Podpis HTML (vpravo) s kódem HTML (vlevo)

    Jak vytvořit podpis e-mailu HTML

  • Boční Pohled Na Muže Pracujícího V Kanceláři

    Použití atributů prvku HTML TABLE

  • Javascript přes binární číslice

    Jak vytvořit souvislý textový rámeček v JavaScriptu

  • Logo CSS3

    Rozdíl mezi CSS2 a CSS3

  • design webových stránek Prvky konceptu pro návrh webové stránky.

    Styly CSS

  • Jak změnit podtržení odkazů na webové stránce

Domov

Naučte se každý den něco nového

Byla tam chyba. Prosím zkuste to znovu.

Jsi v! Děkujeme za přihlášení.

Byla tam chyba. Prosím zkuste to znovu.

Děkujeme za přihlášení.

Následuj nás

  • FacebookFacebook
  • FlipboardFlipboard
DŮVĚRYHODNÉ
  • O nás
  • Inzerovat
  • Zásady ochrany osobních údajů
  • Zásady používání souborů cookie
  • Kariéra
  • Redakční pokyny
  • Kontakt
  • Podmínky použití
  • Oznámení o ochraně osobních údajů v Kalifornii

ThoughtCo používá soubory cookie, aby vám poskytl skvělý uživatelský zážitek a pro naše

obchodní účely.
instagram story viewer