Vytvorte rámček s posúvaním textu pomocou CSS a HTML

An HTML rolovacie pole je pole, ktoré pridáva posuvné pruhy na pravú stranu a spodok, keď je obsah poľa väčší ako rozmery poľa. Inými slovami, ak máte rámček, do ktorého sa zmestí asi 50 slov, a text s 200 slovami, posúvacie pole HTML umiestni posuvné lišty nahor, aby ste videli ďalších 150 slov. V štandardnom HTML by to jednoducho vytlačilo nadbytočný text mimo rámčeka.

Vytváranie rolovania pomocou HTML je pomerne jednoduché. Musíte len nastaviť šírku a výška prvku, ktorý chcete posunúť, a potom použite CSS vlastnosť pretečenia nastavuje spôsob, akým sa má rolovanie vyskytnúť.

Čo robiť s textom navyše?

Ak máte viac textu, ako sa zmestí do priestoru na vašom rozložení, máte niekoľko možností:

• Prepíšte text tak, aby bol kratší a aby sa zmestil.
• Nechajte text plynúť za hranice a dúfajte, že sa rozloženie dokáže ohnúť a podporí ho.
• Na mieste, kde preteká, text odrežte.
• Pridajte posúvače (zvyčajne vertikálne pre text), aby sa medzera posúvala a zobrazila ďalší text.

Najlepšou možnosťou je zvyčajne posledná možnosť: vytvoriť rolovacie textové pole. Potom je možné prečítať dodatočný text, ale váš dizajn nebude ohrozený.

HTML a CSS by boli:

napíš sem... 

The prepad: auto; povie prehliadaču, aby pridal rolovacie lišty, ak sú potrebné na to, aby text neprekročil hranice div. Aby to ale fungovalo, potrebujete tiež vlastnosti štýlu šírky a výšky nastavené na div, aby existovali hranice pretečenia.

Text môžete tiež odrezať zmenou prepadu: auto; do prepad: skrytý; Ak vynecháte vlastnosť pretečenia, text sa vyleje cez hranice div.

Posuvníky môžete pridať nielen k textu

Ak máte veľký obrázok, ktorý by ste chceli zobraziť na menšom priestore, môžete okolo neho pridať posúvače rovnako, ako by ste to robili s textom.

V tomto príklade je obrázok 400 x 509 vo vnútri odseku 300 x 300.

Tabuľky môžu využívať rolovacie lišty

Dlhé tabuľky informácií sa dajú veľmi ťažko prečítať veľmi rýchlo, ale ak ich vložíte do priehradky obmedzenej veľkosti a potom pridaním vlastnosti pretečenia môžete vygenerovať tabuľky s množstvom údajov, ktoré vo vašom priečinku nezaberajú extrémne veľa miesta stránke.

Najjednoduchší spôsob je ako s obrázkami a textom, stačí pridať div okolo tabuľky, nastaviť šírku a výšku tohto divu a pridať vlastnosť overflow:

... 

Jedna vec, ktorá sa stane, keď to urobíte, je vodorovný posúvač, ktorý sa zvyčajne zobrazuje, pretože prehliadač predpokladá, že chróm posúvačov prekrýva tabuľku. Existuje mnoho spôsobov, ako to napraviť zmenou šírky stola a ďalšími. Naše najobľúbenejšie je ale jednoducho vypnúť horizontálne posúvanie pomocou vlastnosti CSS 3 prepad-x

Stačí pridať prepad-x: skrytý; na div, a tým sa odstráni vodorovný posuvný panel. Určite to otestujte, pretože by mohol zmiznúť obsah.

Firefox podporuje použitie značiek TBODY na pretečenie

Jednou z naozaj príjemných funkcií prehľadávača Firefox je, že môžete použiť vlastnosť overflow na značkách vnútornej tabuľky, ako sú tbody a thead alebo tfoot. To znamená, že môžete nastaviť posúvače na obsahu tabuľky a bunky hlavičky zostanú ukotvené nad nimi. To funguje iba vo Firefoxe, čo je veľmi zlé, ale je to príjemná funkcia, ak vaši čitatelia používajú iba Firefox. Prejdite na tento príklad vo Firefoxe a uvidíte, čo mám na mysli.

... NamePhoneJennifer502-5366. 

...