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. 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 je jednoducho vypnúť horizontálne rolovanie s vlastnosťou CSS 3 pretečeniu-x , Stačí pridať pretečenie-x: skryté; k div, a to odstráni horizontálny posúvač. Nezabudnite to otestovať, pretože môže dôjsť k zmiznutiu obsahu.
Tabuľky môžu využívať posúvače
názov telefón Jennifer 502-5366
