Készítsen egy gördülő szöveget a CSS és a HTML használatával
A HTML görgetődoboz olyan doboz, amely a jobb oldali és alsó részhez görgetősávokat ad hozzá, ha a doboz tartalma nagyobb, mint a dobozméretek. Más szóval, ha van egy doboz, amely kb. 50 szóra illeszkedik, és 200 szavas szöveggel rendelkezik, a HTML görgetődoboz a görgetősávokat felfelé teszi, hogy lássa a további 150 szót. A szabványos HTML-ben, amely egyszerűen csak a szövegen kívüli szöveget nyomja a dobozon kívül.
A HTML görgetés viszonylag egyszerű. Csak be kell állítania a gördítendő elem szélességét és magasságát, majd a CSS túlcsordulási tulajdonság használatával állítsa be, hogyan kívánja a görgetést.
Mi a teendő az extra szöveget?
Ha több szöveg található, mint az elrendezés helyén, akkor néhány lehetősége van:
- Röviden írja be a szöveget, hogy rövidebb legyen és illeszkedjen.
- Hagyja, hogy a szöveg meghaladja a határokat, és remélem, hogy az elrendezés rugalmasan támogatja azt.
- Vágja le a szöveget, ahol túlcsordul.
- Adjon hozzá görgetősávokat (általában szöveg függőleges), hogy a hely gördüljön, hogy megjelenítse az extra szöveget.
A legjobb lehetőség általában az utolsó lehetőség: gördülő szövegdoboz létrehozása. Ezután további szövegeket lehet olvasni, de a tervezés nem sérül.
A HTML és a CSS erre lenne:
A túlcsordulás: auto; megmondja a böngészőnek, hogy adjon hozzá görgetősávokat, ha szükséges ahhoz, hogy a szöveg a div határait túlerődjön. De annak érdekében, hogy ez működjön, akkor is szükség van a szélességi és magasság stílusú tulajdonságok a div, így vannak határok a túlcsordulás.
A szöveg túlcsordulásával is levághatja a szöveget: auto; túlcsordulás: rejtett; Ha elhagyja a túlcsordulási tulajdonságot, akkor a szöveg át fogja adni a div határait.
Hozzáadhatod a görgetősávokat több mint csak szöveghez
Ha van egy nagyméretű kép, amelyet kisebb helyeken szeretne megjeleníteni, a szöveggel megegyező módon görgetősávokat is felvehet.
Ebben a példában a 400x509 kép egy 300x300 bekezdésen belül található.
A táblázatok a görgetődobozok előnyeit élvezhetik
A hosszú információs táblázatok nagyon nehezen olvashatók le nagyon gyorsan, de ha egy korlátozott méretű div-ot helyeznek el, majd hozzáadják a túlcsordulási tulajdonságot, akkor olyan táblázatokat hozhat létre, amelyekben sok olyan adat áll rendelkezésre, amelyek nem vesznek el extrém helyet az oldalán .
A legegyszerűbb módja ugyanúgy, mint a képek és a szöveg, csak hozzá egy div az asztal körül, állítsa be a div szélességét és magasságát, és adja hozzá a túlcsordulási tulajdonságot:
Egy dolog, ami akkor történik, ha ezt csinálod, egy vízszintes görgetősáv általában megjelenik, mert a böngésző feltételezi, hogy a görgetősávok krómja átfedi az asztalt. A táblázat szélességének megváltoztatásával sokféle módon javíthatunk. De a kedvencem egyszerűen kikapcsolni a vízszintes görgetést a CSS 3 tulajdonság túlcsordulásával x. Csak add overflow-x: rejtett; a divhoz, és eltávolítja a vízszintes görgetősávot. Ügyeljen arra, hogy tesztelje ezt, mivel lehet, hogy eltűnik a tartalom.
A Firefox támogatja a TBODY címkéket a túlcsorduláshoz
A Firefox böngésző egyik nagyon szép tulajdonsága, hogy a túlcsordulási tulajdonságot a belső táblázatokon használhatja, mint a tbody és a thead vagy a tfoot. Ez azt jelenti, hogy görgetősávokat lehet beállítani a táblázatban, és a fejléccellák a fenti felett horgonyoznak. Ez csak a Firefoxban működik, ami túl rossz, de ez egy jó tulajdonság, ha olvasóid csak a Firefoxot használják. Keresse meg ezt a példát a Firefoxban, hogy megnézze, mit értek.
| Név | Telefon |
|---|---|
| Jennifer | 502-5366
|