HTML-rulleboks
Lag en boks med rulletekst ved hjelp av CSS og HTML
An HTML rulleboks er en boks som legger til rullefelt på høyre side og bunn når innholdet i boksen er større enn boksens dimensjoner. Med andre ord, hvis du har en boks som har plass til rundt 50 ord, og du har tekst på 200 ord, vil en HTML-rulleboks sette rullefelter opp slik at du kan se de ytterligere 150 ordene. I standard HTML ville det ganske enkelt presse den ekstra teksten utenfor boksen.
Å lage HTML-rulling er ganske enkelt. Du trenger bare å stille inn bredden og høyde av elementet du vil rulle, og bruk deretter CSS overflow-egenskap for å angi hvordan du vil at rullingen skal skje.
Hamza TArkkol/Getty Images
Hva skal jeg gjøre med ekstratekst?
Når du har mer tekst enn det som får plass i plassen på layouten, har du noen alternativer:
- Skriv om teksten slik at den blir kortere og passer.
- La teksten flyte utover grensene og håper oppsettet kan bøye seg for å støtte det.
- Klipp av teksten der den renner over.
- Legg til rullefelt (vanligvis vertikalt for tekst) slik at mellomrommet ruller for å vise ekstra tekst.
Det beste alternativet er vanligvis det siste alternativet: lag en rullende tekstboks. Da kan den ekstra teksten fortsatt leses, men designet ditt blir ikke kompromittert.
HTML og CSS for dette vil være:
|_+_| |_+_| |_+_|De overløp: auto; ber nettleseren legge til rullefelt hvis de er nødvendige for å forhindre at teksten flyter over grensene til div. Men for at dette skal fungere, trenger du også bredde- og høydestilegenskapene satt på div, slik at det er grenser som skal flyte over.
Du kan også kutte av teksten ved å endre overflyt: auto; til overløp: skjult; Hvis du utelater overløpsegenskapen, vil teksten gå over grensene til div.
Du kan legge til rullefelt i mer enn bare tekst
Hvis du har et stort bilde som du vil vise på en mindre plass, kan du legge til rullefelt rundt det på samme måte som du ville gjort med tekst.
|_+_| |_+_|
I dette eksemplet er bildet på 400 x 509 inne i et avsnitt på 300 x 300.
Tabeller kan dra nytte av rullefelt
Lange tabeller med informasjon kan bli veldig vanskelige å lese veldig raskt, men ved å sette dem inne i en div av begrenset størrelse og deretter legge til overflow-egenskapen, kan du generere tabeller med masse data som ikke tar opp ekstrem plass på siden din.
Den enkleste måten er akkurat som med bilder og tekst, bare legg til en div rundt bordet, angi bredden og høyden på den div, og legg til overflow-egenskapen:
|_+_| |_+_|En ting som skjer når du gjør dette er at det vanligvis vises et horisontalt rullefelt fordi nettleseren antar at krom på rullefeltene overlapper tabellen. Det er mange måter å fikse dette på fra å endre bredden på bordet og andre. Men vår favoritt er å ganske enkelt slå av horisontal rulling med CSS 3-egenskapen overløp-x
Bare legg til overløp-x: skjult; til div, og det vil fjerne den horisontale rullelinjen. Pass på å teste dette, da det kan være innhold som forsvinner.
|_+_|Firefox støtter bruk av TBODY-taggene for overløp
En veldig fin funksjon i Firefox-nettleseren er at du kan bruke overflow-egenskapen på indre tabellkoder som tbody og thead eller tfoot. Dette betyr at du kan sette rullefelt på tabellinnholdet, og overskriftscellene forblir forankret over dem. Dette fungerer kun i Firefox, noe som er synd, men det er en fin funksjon hvis leserne dine kun bruker Firefox. Bla til dette eksemplet i Firefox for å se hva jeg mener.
|_+_| |_+_||_+_|