HTML rolovacie pole

Vytvorte rámček s rolujúcim textom pomocou CSS a HTML

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

Vytvorenie rolovania HTML je pomerne jednoduché. Stačí nastaviť šírku a výška prvku, ktorý chcete posúvať, a potom použiť CSS vlastnosť overflow na nastavenie spôsobu, akým sa má rolovanie vykonávať.

Hamza TArkkol/Getty Images

Čo robiť s textom navyše?

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

• Prepíšte text tak, aby bol kratší a zmestil sa.
• Nechajte text plynúť za hranice a dúfajte, že sa rozloženie dokáže ohýbať, aby ho podporilo.
• Odrežte text tam, kde preteká.
• Pridajte posuvné lišty (zvyčajne vertikálne pre text), aby sa priestor posúval a zobrazoval nadbytočný text.

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

HTML a CSS na to budú:

|_+_| |_+_| |_+_|

The prepad: auto; povie prehliadaču, aby pridal posúvacie lišty, ak sú potrebné, aby text neprekročil hranice prvku div. Aby to však fungovalo, potrebujete aj vlastnosti štýlu šírky a výšky nastavené na prvku div, aby existovali hranice, ktoré sa majú prekročiť.

Text môžete orezať aj zmenou pretečenia: auto; do prepad: skrytý; Ak vynecháte vlastnosť overflow, text sa preleje cez hranice prvku div.

Môžete pridať posúvače k ​​viac než len 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 rovnakým spôsobom ako pri texte.

|_+_| |_+_|

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 s informáciami môžu byť veľmi ťažko čitateľné a veľmi rýchlo, ale ich umiestnením do prvku div obmedzenej veľkosti a pridaním vlastnosti overflow môžete generovať tabuľky s množstvom údajov, ktoré na vašej stránke nezaberajú extrémne miesto.

Najjednoduchší spôsob je rovnako ako v prípade obrázkov a textu, stačí pridať div okolo tabuľky, nastaviť šírku a výšku tohto div a pridať vlastnosť overflow:

|_+_| |_+_| |_+_| |_+_|názov|_+_|Telefón|_+_| |_+_| |_+_| |_+_| |_+_|Jennifer|_+_|502-5366|_+_| |_+_| |_+_| |_+_| |_+_|

Jedna vec, ktorá sa stane, keď to urobíte, je, že sa zvyčajne zobrazí vodorovný posuvník, pretože prehliadač predpokladá, že chróm posuvných pruhov prekrýva tabuľku. Existuje mnoho spôsobov, ako to vyriešiť zmenou šírky stola a inými. Ale naše obľúbené je jednoducho vypnúť horizontálne posúvanie pomocou vlastnosti CSS 3 prepad-x

Stačí pridať pretečenie-x: skryté; na div a tým sa odstráni vodorovný posúvač. Nezabudnite to otestovať, pretože môže existovať obsah, ktorý zmizne.

|_+_|

Firefox podporuje používanie značiek TBODY na pretečenie

Jednou naozaj peknou vlastnosťou prehliadača Firefox je, že môžete použiť vlastnosť overflow na vnútorných značkách tabuľky, ako sú tbody a thead alebo tfoot. To znamená, že na obsah tabuľky môžete nastaviť posuvníky a bunky hlavičky zostanú ukotvené nad nimi. Funguje to iba vo Firefoxe, čo je veľmi zlé, ale je to pekná funkcia, ak vaši čitatelia používajú iba Firefox. Prejdite na tento príklad vo Firefoxe a zistite, čo tým myslím.

|_+_| |_+_||_+_| |_+_|názov|_+_|Telefón|_+_| |_+_| |_+_| |_+_| |_+_|Jennifer|_+_|502-5366|_+_| |_+_|