Vytvorte pole so scrolling text pomocou CSS a HTML
Posúvacie pole HTML je políčko, ktoré pridáva posuvné lišty na pravú a spodnú stranu, keď obsah škatule je väčší ako rozmery škatule. Inými slovami, ak máte krabici, ktorá sa zmestí do 50 slov a máte text s 200 slovami, posúvacie pole HTML posunie posúvacie lišty nahor, aby ste mohli vidieť ďalších 150 slov. V štandardnom HTML, ktorý by jednoducho posunul extra text mimo rámčeku.
Posúvanie HTML je pomerne jednoduché. Stačí nastaviť šírku a výšku prvku, ktorý chcete posúvať a potom použiť vlastnosť pretečenia CSS, aby ste nastavili spôsob, akým má dôjsť k posúvaniu.
Čo robiť s extra textom?
Ak máte vo svojom rozložení viac textu, ako sa bude hodiť, máte niekoľko možností:
- Prepíšte text tak, aby bol kratší a aby sa zmestil.
- Povoľte, aby text prekročil hranice a dúfajte, že rozloženie sa môže ohnúť, aby ste ho podporili.
- Odrežte text, kde preteká.
- Pridajte posuvné lišty (zvyčajne vertikálne pre text) tak, aby sa priestor posúval, aby sa zobrazil ďalší text.
Najlepšou voľbou je zvyčajne posledná možnosť: vytvoriť posúvacie textové pole. Potom môžete prečítať ďalší text, ale váš návrh nie je ohrozený.
HTML a CSS by to bolo:
Pretečenie: auto; informuje prehliadač, aby pridal posuvné lišty, ak sú potrebné na to, aby text neprekročil hranice div. Ale aby to fungovalo, potrebujete tiež vlastnosti štýlu šírky a výšky nastavené na div, aby existovali hranice pretečeniu.
Môžete tiež odstrániť text zmenou pretečenia: auto; prepad: skryté ;. Ak vynecháte vlastnosť pretečenia, text preletie cez hranice div.
Môžete pridať posúvače na viac ako len text
Ak máte veľký obrázok, ktorý chcete zobraziť v menšom priestore, môžete doň pridať rolovacie lišty rovnakým spôsobom, aký by ste použili s textom.
V tomto príklade sa obrázok 400x509 nachádza v odseku 300 x 300.
Tabuľky môžu využívať posúvače
Dlhé tabuľky informácií môžu byť veľmi ťažko čitateľné veľmi rýchlo, ale ich umiestnením do div obmedzenej veľkosti a potom pridaním vlastnosti pretečenia môžete generovať tabuľky s množstvom údajov, ktoré na vašej stránke nezabezpečujú extrémny priestor ,
Najjednoduchší spôsob je rovnaký ako u obrázkov a textu, stačí pridať div okolo tabuľky, nastaviť šírku a výšku tejto div a pridať vlastnosť pretečenia:
Jedna vec, ktorá sa stane, keď to robíte, je horizontálna posuvná lišta, ktorá sa zvyčajne objavuje, pretože prehliadač predpokladá, že chróm posúvačov sa prekrýva s tabuľkou. Existuje mnoho spôsobov, ako to opraviť zmenou šírky tabuľky a ostatných. Ale mojou najobľúbenejšou voľbou je jednoducho vypnúť horizontálne rolovanie s pretekaním objektu CSS 3-x. Stačí pridať overflow-x: skryté; k div, a to odstráni horizontálny posúvač. Nezabudnite to otestovať, pretože môže dôjsť k zmiznutiu obsahu.
Firefox podporuje používanie značiek TBODY pre pretečenie
Jednou naozaj peknou funkciou prehliadača Firefox je, že môžete použiť vlastnosť pretečenia na vnútorných tagoch ako tbody a thead alebo tfoot. To znamená, že môžete nastaviť posúvače na obsah tabuľky a bunky hlavičky zostanú zakotvené nad nimi. Toto funguje len vo Firefoxe , čo je príliš zlé, ale je to pekná funkcia, ak vaša čitatelia používajú iba Firefox. Prejdite do tohto príkladu vo Firefoxe, aby ste videli, čo mám na mysli.
| Jennifer | 502-5366
|