En HTML-rulleboks er en boks som legger rullefeltene til høyre og nederst når innholdet i boksen er større enn boksens dimensjoner. Med andre ord, hvis du har en boks som kan passe rundt 50 ord, og du har tekst på 200 ord, vil en HTML-rulleboks sette rullebjelker opp for å la deg se de ytterligere 150 ordene. I standard HTML som bare ville skyve den ekstra teksten utenfor boksen.
Å lage HTML-rulle er ganske enkelt. Du trenger bare å angi bredden og høyden på elementet du vil bla, og bruk deretter CSS-overflowegenskapen til å angi hvordan du vil at rullingen skal skje.
Hva skal jeg gjøre med ekstra tekst?
Når du har mer tekst enn passer inn i rommet på layoutet, har du noen muligheter:
- Skriv om teksten slik at den er kortere og passer.
- Tillat teksten å strømme utover grensene, og håper utformingen kan bøyes for å støtte den.
- Klipp av teksten der den går over.
- Legg til rullestenger (vanligvis vertikalt for tekst) slik at plassen ruller for å vise ekstra tekst.
Det beste alternativet er vanligvis det siste alternativet: Lag en rulleboksen. Deretter kan ekstra tekst fortsatt leses, men designet ditt er ikke kompromittert.
HTML og CSS for dette ville være:
De
overløp: auto;
forteller at nettleseren skal legge til rullefelt hvis de trengs for å holde teksten fra overflødig av grensene til div. Men for at dette skal fungere, trenger du også bredden og høydestil-egenskapene som er satt på diven, slik at det er grenser å overflyte.
Du kan også kutte av teksten ved å endre overløp: auto; å overflyte: skjult ;. Hvis du slipper ut overflodegenskapen, vil teksten spyle over grensene til div.
Du kan legge til rullestenger til mer enn bare tekst
Hvis du har et stort bilde som du vil vise på en mindre plass, kan du legge til rullefelt rundt den på samme måte som du ville med tekst.
I dette eksemplet er 400x509 bildet inne i et 300x300 avsnitt. Langt informasjonstavler kan bli svært vanskelig å lese veldig raskt, men ved å sette dem inn i en div av en begrenset størrelse og deretter legge til overflodegenskapen, kan du generere tabeller med mye data som ikke tar opp ekstremt plass på siden din . Den enkleste måten er som med bilder og tekst, bare legg til en div rundt bordet, sett bredden og høyden på den diven, og legg til overløpsegenskapen: En ting som skjer når du gjør dette, er en horisontal rullepanel som vanligvis vises fordi nettleseren forutsetter at kromene på rullefeltene overlapper tabellen. Det er mange måter å fikse dette på fra å endre bredden på bordet og andre. Men min favoritt er å bare slå av horisontal rulling med CSS 3-egenskapen flow-x . Bare legg til overflow-x: hidden; til div, og det vil fjerne den horisontale rullefeltet. Pass på å teste dette, siden det kan være innhold som forsvinner.
Tabeller kan dra nytte av rullestenger
Navn telefon Jennifer 502-5366
