Ustvarite polje z drsnim besedilom s pomočjo CSS in HTML

An HTML drsno polje je polje, ki doda drsne trakove na desni in spodnji strani, če je vsebina polja večja od dimenzij polja. Z drugimi besedami, če imate polje, ki lahko vsebuje približno 50 besed, in imate besedilo 200 besed, bo drsno polje HTML postavilo drsne trakove navzgor, da boste videli dodatnih 150 besed. V standardnem HTML-ju bi preprosto besedilo preprosto potisnilo izven polja.

Premikanje v HTML je dokaj enostavno. Nastaviti morate samo širino in višina elementa, po katerem se želite pomakniti in nato uporabiti CSS lastnost overflow, da nastavite, kako naj se premika.

Kaj storiti z dodatnim besedilom?

Ko imate več besedila, kot bo umeščenega v prostor na postavitvi, imate na voljo nekaj možnosti:

• Besedilo napišite tako, da bo krajše in bo ustrezalo.
• Pustite, da besedilo teče čez meje, in upamo, da se bo postavitev lahko podprla.
• Besedilo odrežite tam, kjer se preliva.
• Dodajte drsne trakove (običajno navpično za besedilo), tako da se presledek pomakne, da se prikaže dodatno besedilo.

Najboljša možnost je običajno zadnja možnost: ustvarite drsno polje z besedilom. Potem je še vedno mogoče prebrati dodatno besedilo, vendar vaš dizajn ni ogrožen.

HTML in CSS za to bi bila:

besedilo tukaj... 

The preliv: samodejno; brskalniku pove, naj doda drsne trakove, če so potrebni, da besedilo ne preseže meja divja. Da pa bo to delovalo, potrebujete tudi lastnosti sloga širine in višine, ki so nastavljene na div, tako da obstajajo meje za prelivanje.

Besedilo lahko odrežete tudi tako, da spremenite overflow: auto; do preliv: skrit; Če izpustite lastnost overflow, se bo besedilo prelilo čez meje divja.

Drsnih trakov lahko dodate več kot le besedilu

Če imate veliko sliko, ki bi jo radi prikazali v manjšem prostoru, lahko okoli nje dodate drsne trakove na enak način kot z besedilom.

V tem primeru je slika 400 x 509 znotraj odstavka 300 x 300.

Tabele lahko izkoristijo drsne palice

Dolge tabele z informacijami je zelo težko prebrati zelo hitro, vendar jih vstavimo v div omejene velikosti in nato dodate lastnost overflow, lahko ustvarite tabele z veliko podatki, ki ne zajemajo ekstremnega prostora na vašem strani.

Najlažji način je tako kot pri slikah in besedilu, preprosto dodajte div okoli tabele, nastavite širino in višino tega divja ter dodajte lastnost overflow:

... 

Ko se to zgodi, se običajno pojavi vodoravna drsna vrstica, ker brskalnik domneva, da krom drsnih trakov prekriva tabelo. Obstaja veliko načinov, kako to popraviti s spreminjanjem širine tabele in drugimi. Najljubše pa je, da z lastnostjo CSS 3 preprosto izklopimo vodoravno drsenje overflow-x

Samo dodaj overflow-x: skrit; na div, to pa bo odstranilo vodoravno drsno vrstico. To obvezno preizkusite, saj lahko vsebina izgine.

Firefox podpira uporabo oznak TBODY za prelivanje

Ena zelo lepa lastnost brskalnika Firefox je, da lahko lastnost prelivanja uporabite na oznakah notranje tabele, kot so tbody in thead ali tfoot. To pomeni, da lahko nastavite drsne trakove na vsebini tabele, celice glave pa ostanejo zasidrane nad njimi. To deluje samo v Firefoxu, kar je škoda, vendar je lepa lastnost, če bralci uporabljajo samo Firefox. Poiščite ta primer v Firefoxu, da vidite, kaj mislim.

... ImePhoneJennifer502-5366. 

...