Meitsje in fekje mei scrollende tekst mei help fan CSS en HTML
In HTML scrollbox is in fekje dy't tafoeging skermbalken oan de rjochterkant en boaiem taheakje as de ynhâld fan it fekje grutter is as de kastmaaten. Mei oare wurden, as jo in foarkar hawwe dy't 50 wurden bepale kinne, en jo hawwe tekst fan 200 wurden, sil in HTML scrollbox scrollbalken stean om jo de ekstra 150 wurden te sjen. Yn standert HTML dat jo de ekstra tekst drukke bûten de kast.
It meitsjen fan HTML-scrollen is frij maklik. Jo moatte gewoan de breedte en hichte fan it elemint ynstelle, dat jo scrollen wolle en brûk dan it CSS- oerflak-eigenskip om te setten hoe't jo wolle dat it skermen foarkomme wol.
Wat te dwaan mei ekstra tekst?
As jo mear tekst hawwe as jo passe yn 'e romte op jo layout, hawwe jo in pear mooglikheden:
- Folje de tekst sa dat it koarter is en sil passe.
- Litte de tekst troch de grinzen hinne stringen en hoopje dat it layout fytse kin om it te stypjen.
- Ferjit de tekst wêr't it oerflaket.
- Add scroll bars (meastal fertikaal foar tekst) sadat de romte skriuwt om de ekstra tekst te sjen.
De bêste opsje is typysk de lêste opsje: in tekstbalke meitsje. Dan kinne ekstra tekst noch lêzen wurde, mar jo ûntwerp is net kompromisearre.
HTML en CSS foar dit soe wêze:
De oerwinning: auto; fertelt de blêder om skermbalken te foegjen as se nedich binne om de tekst te hâlden fan de divysten oer te oerflakjen. Mar om sadanich om te wurkjen, moatte jo ek de yndieling breedte en hichtestyl op de div sette, sadat der grinzen binne om oer te rinnen.
Jo kinne de tekst ek trochbrekke troch feroaring oerflak: auto; nei oerwâld: ferburgen; As jo it oerwâlde eigendom útlitte, sil de tekst oer de grinzen fan 'e div.
Jo kinne blêdbalken taheakje oan mear as gewoan tekst
As jo in grut byld hawwe dat jo graach yn in lytsere romte werjaan wolle, dan kinne jo it rôlbalken omgean op deselde wize as jo wolle mei tekst.
Yn dit foarbyld is it 400x509 ôfbylding binnen in 300x300 paragraaf.
Tabel kinne leare fan scrollbalken
Lange tabellen fan ynformaasje kinne tige swier wêze om tige fluch te lêzen, mar troch se yn in div in beheinde grutte te pleatsen en it tafoegjen fan it oerflúzeneigenskip kinne jo tabellen meitsje mei in soad gegevens dy't gjin ekstreme romte op jo side opnimme .
De maklikste manier is krektlyk as bylden en tekst, foegje in dûbel om de tabel oan, set de breedte en de hichte fan dizze div, en addt it oerflústerguod:
| Phone | |||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Ien ding dat bart as jo dit dogge, komt normaal foar in horizontale scrollbalke om't de blêder deromt, dat it chrome fan de scrollbalken it tafel oerlopet. Der binne in protte manieren om dit te behearjen fan it feroarjen fan de breedte fan 'e tafel en oaren. Mar myn favorite is om gewoanlik horizontaal skerming mei it CSS 3-eigenskip oerflak-x te wikseljen. Brûk just oer oerflak-x: ferburgen; nei de div, en dat sil de horizontale scrollbalke fuortsmite. Soargje dit te testen, sa't der ynhâld wêze kin dat ferdwynt. Firefox stipet It brûken fan de TBODY-tags foar OverflowIen echt moai eigenskip fan 'e Firefox-blêder is dat jo de oerflak eigendom brûke kinne op innende tabeltags lykas tbody en thead of tfoot. Dit betsjut dat jo skermbarren op 'e tafel ynhâld kinne sette, en de header-sellen bliuwe boppe harren. Dit allinne wurket yn Firefox , dy't te min is, mar it is in noflike funksje as jo lêzers allinne Firefox brûke. Blêdzje nei dit foarbyld yn Firefox om te sjen wat ik betsjutte.
|