Ustvarite polje s pomikanjem besedila s pomočjo CSS in HTML
Polje za pomikanje po HTML-ju je polje, ki doda drsne palice na desni in spodnji strani, če je vsebina polja večja od dimenzij polja. Z drugimi besedami, če imate polje, ki se lahko prilega približno 50 besedam in imate besedo 200 besed, bo polje za pomikanje HTML postavilo drsna mesta, da boste videli dodatne 150 besed. V standardnem HTML-ju, ki bi preprosto potiskal dodatno besedilo izven okna.
Ustvarjanje HTML-pomika je dokaj enostavno. Postaviti morate samo širino in višino elementa, ki ga želite premikati, in nato uporabite lastnost pretoka CSS, da nastavite, kako želite, da se drsenje pojavi.
Kaj storiti z dodatnim besedilom?
Ko imate več besedila, kot se bo ujemalo v presledku, imate na voljo nekaj možnosti:
- Besedilo spremenite tako, da bo krajše in bo ustrezalo.
- Dovolite, da besedilo prehaja čez meje in upam, da se bo postavitev lahko prilagodila temu, da jo podpira.
- Izrežite besedilo, kjer se preliva.
- Dodajte drsne palice (običajno navpično za besedilo), tako da se bo pomikanje prostora prikazalo dodatno besedilo.
Najboljša možnost je ponavadi zadnja možnost: ustvarite drsno besedilno polje. Potem lahko še vedno preberete dodatno besedilo, vendar vaš design ni ogrožen.
Za to bi morali biti HTML in CSS:
Overflow: auto; pove brskalniku, naj doda drsne vrstice, če so potrebni, da besedilo preplavi meje div. Toda, če želite to delati, potrebujete tudi lastnosti sloga širine in višine, ki so določene na divu, tako da obstajajo meje za prelivanje.
Besedilo lahko tudi prekinete tako, da spremenite preliv: auto; preliti: skrito ;. Če pustite zunanjo lastnost, se besedilo prelije čez meje div.
Dodate lahko drsne palice na več kot samo besedilo
Če imate veliko sliko, ki bi jo želeli prikazati v manjšem prostoru, lahko doda palice za pomikanje okoli njega na enak način kot vi z besedilom.
V tem primeru je slika 400x509 znotraj odstavka 300x300.
Tabele lahko koristijo drsni trakovi
Dolge tabele informacij lahko hitro preberejo zelo težko, vendar jih postavite v delček omejene velikosti in nato dodate lastnost prelivanja, lahko ustvarite tabele z veliko podatkov, ki ne presegajo skrajnega prostora na vaši strani .
Najlažja pot je prav tako kot pri slikah in besedilu, dodajte div okoli tabele, nastavite širino in višino tega diva in dodajte lastnost preliva:
| Ime | Telefon | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Ena stvar, ki se zgodi, ko to naredite, je navadno prikazana vodoravna drsna vrstica, ker brskalnik predpostavlja, da se krom drsnih trakov prekriva s tabelo. Obstaja veliko načinov, kako to popraviti s spreminjanjem širine tabele in drugih. Ampak moj najljubši je, da preprosto izklopite vodoravno pomikanje s preobremenitvijo-CS x CSS 3. Samo dodajte overflow-x: skrito; na div, in to bo odstranilo vodoravno drsno vrstico. Preverite to, ker je morda vsebina, ki izgine. Firefox podpira uporabo oznak TBODY za OverflowEna res lepa lastnost brskalnika Firefox je, da lahko uporabite lastnost prelivanja v notranjih oznakah tabele, kot so tbody in thead ali tfoot. To pomeni, da lahko nastavite drsne palice na vsebino tabele in da glave nad njimi ostanejo zasidrane. To deluje samo v Firefoxu , kar je preveč slabo, vendar je to lepa funkcija, če vaši bralci uporabljajo Firefox samo. Prebrskajte ta primer v Firefoxu, da vidite, kaj mislim.
|