Lag en rute med rulletekst ved hjelp av CSS og HTML

click fraud protection

An HTML rulleboks er en rute som legger til rullefelt til høyre og nederst når innholdet i ruten er større enn rammens dimensjoner. Med andre ord, hvis du har en rute som kan passe rundt 50 ord, og du har tekst på 200 ord, vil en HTML-rulleboks sette rullefelt opp slik at du kan se de ytterligere 150 ordene. I standard HTML som ganske enkelt skyver den ekstra teksten utenfor boksen.

Å lage HTML-rulle er ganske enkelt. Du trenger bare å stille inn bredden og høyde av elementet du vil bla, og bruk deretter CSS overløpsegenskap for å angi hvordan du vil at rulle skal forekomme.

HTML-kode
Hamza TArkkol / Getty Images

Hva skal jeg gjøre med ekstra tekst?

Når du har mer tekst enn det som passer inn i plassen på oppsettet ditt, har du noen få alternativer:

  • Skriv om teksten slik at den blir kortere og passer.
  • La teksten flyte utenfor grensene og håper oppsettet kan bøyes for å støtte den.
  • Klipp av teksten der den renner over.
  • Legg til rullefelt (vanligvis loddrett for tekst) slik at mellomrommet ruller for å vise den ekstra teksten.
instagram viewer

Det beste alternativet er vanligvis det siste alternativet: opprett en rullende tekstboks. Da kan den ekstra teksten fremdeles leses, men designet ditt kompromitteres ikke.

HTML og CSS for dette vil være:

tekst her... 

De overløp: auto; ber nettleseren om å legge til rullefelt hvis de er nødvendige for å holde teksten overfylt div. Men for at dette skal fungere, trenger du også bredde- og høydestilegenskapene satt på div, slik at det er grenser å flyte over.

Du kan også kutte av teksten ved å endre overflow: auto; til overløp: skjult; Hvis du utelater overløpsegenskapen, vil teksten spyle over div. Grensene.

Du kan legge til rullefelt til mer enn bare tekst

Hvis du har et stort bilde som du vil vise på et mindre område, kan du legge til rullefelt rundt det på samme måte som med tekst.

I dette eksemplet er 400x509-bildet inne i et 300x300-avsnitt.

Tabeller kan dra nytte av rullefelt

Lange tabeller med informasjon kan bli veldig vanskelig å lese veldig raskt, men ved å plassere dem i en div med begrenset størrelse og deretter legge til overløpsegenskapen, kan du generere tabeller med mye data som ikke tar ekstrem plass på din side.

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 diven, og legg til overløpsegenskapen:

... 

En ting som skjer når du gjør dette, er at en horisontal rullefelt vanligvis vises fordi nettleseren antar at krom på rullefeltene overlapper bordet. Det er mange måter å fikse dette ved å endre bredden på bordet og andre. Men vår favoritt er å bare slå av horisontal rulling med CSS 3-egenskapen overløp-x

Bare legg til overflow-x: skjult; til div, og det vil fjerne den horisontale rullefeltet. Husk å teste dette, da det kan være innhold som forsvinner.

Firefox støtter bruk av TBODY-koder for overløp

En veldig fin funksjon i Firefox-nettleseren er at du kan bruke overløpsegenskapen på indre bordkoder som tbody og thead eller tfoot. Dette betyr at du kan angi rullefelt på innholdet i tabellen, og topptekstcellene holder seg forankret over dem. Dette fungerer bare i Firefox, noe som er for dårlig, men det er en fin funksjon hvis leserne bare bruker Firefox. Bla til dette eksemplet i Firefox for å se hva jeg mener.

... NamePhoneJennifer502-5366. 
... 

Format

mlaapachicago

Sitatet ditt

Kyrnin, Jennifer. "HTML-rulleboks." ThoughtCo, mai. 14, 2021, thoughtco.com/html-scroll-box-3466228.Kyrnin, Jennifer. (2021, 14. mai). HTML-rulleboks. Innhentet fra https://www.thoughtco.com/html-scroll-box-3466228Kyrnin, Jennifer. "HTML-rulleboks." ThoughtCo. https://www.thoughtco.com/html-scroll-box-3466228 (åpnet 23. juni 2021).

  • To menn som koder på datamaskiner

    Hvordan utforme IFrames med CSS

  • Programmeringsillustrasjon

    Hvordan bruke CSS til å sentrere bilder og andre HTML-objekter

  • Mann, gjør, webdesign, ved, desk.

    Hvordan lage et 3-kolonneoppsett i CSS

  • Nettbrett som viser nyheter på skrivebordet

    Slik flyter du et bilde til høyre for teksten

  • Arbeidere som bruker programvare for å kalibrere fjærer på kontoret

    Legg til bilder på websider ved hjelp av HTML

  • Mann i briller på telefon ved hjelp av bærbar datamaskin

    Hvordan sette inn linjer i HTML med HR-koden

  • kvinnelig webutvikler som arbeider på datamaskin

    Slik flyter du et bilde til venstre for teksten på en webside

  • Ulike beholdere og dataskjermer tilsynelatende fylt med væske, tittel: Innhold er som vann

    Fixed Width Layouts Versus Liquid Layouts

  • Kvinne som ser på veggen med kode

    Opprette rullbart innhold i HTML5 og CSS3 uten MARQUEE

  • Vannmerket bilde av en brusende strøm

    Hvordan lage et vannmerke i Microsoft Publisher

  • En HTML-signatur (høyre) med HTML-kode (venstre)

    Hvordan lage en HTML-e-signatur

  • Sidesikt, av, mann, arbeider, office

    Bruke HTML TABLE Elementattributter

  • Javascript over binære sifre

    Hvordan lage et kontinuerlig teksttelt i JavaScript

  • CSS3-logo

    Forskjellen mellom CSS2 og CSS3

  • nettsteddesign Konseptelementer for utforming av et nettsted.

    CSS disposisjonsstiler

  • Hvordan endre koblingsunderstreker på en webside

Hjem

Lær noe nytt hver dag

Det var en feil. Vær så snill, prøv på nytt.

Du er med! Takk for at du registrerte deg.

Det var en feil. Vær så snill, prøv på nytt.

Takk for at du meldte deg på.

Følg oss

  • FacebookFacebook
  • FlipboardFlipboard
TRUSTe
  • Om oss
  • Reklamere
  • Personvernregler
  • Retningslinjer for informasjonskapsler
  • Karrierer
  • Redaksjonelle retningslinjer
  • Ta kontakt med
  • Vilkår for bruk
  • Personvernerklæring i California

ThoughtCo bruker informasjonskapsler for å gi deg en god brukeropplevelse og for våre

forretningsformål.
instagram story viewer