Skapa en ruta med rullningstext med CSS och HTML

Ett HTML rullruta är en ruta som lägger till rullningslister till höger och längst ner när innehållet i rutan är större än rutans mått. Med andra ord, om du har en ruta som kan rymma cirka 50 ord och du har en text på 200 ord, kommer en HTML-rullruta att placera rullningslister så att du kan se ytterligare 150 ord. I standard HTML som helt enkelt skulle skjuta den extra texten utanför rutan.

Att göra HTML-rullning är ganska enkelt. Du behöver bara ställa in bredden och höjd av elementet du vill bläddra och använd sedan CSS överflödsegenskap för att ställa in hur du vill att rullningen ska ske.

Vad ska jag göra med extra text?

När du har mer text än vad som passar i utrymmet på din layout har du några alternativ:

• Skriv om texten så att den blir kortare och passar.
• Låt texten flyta utanför gränserna och hoppas att layouten kan böjas för att stödja den.
• Klipp av texten där den flödar över.
• Lägg till rullningslister (vanligtvis vertikalt för text) så att mellanslaget rullar för att visa den extra texten.

Det bästa alternativet är vanligtvis det sista alternativet: skapa en rullningstextruta. Då kan den extra texten fortfarande läsas, men din design äventyras inte.

HTML och CSS för detta skulle vara:

Skriv här... 

De överflöde: auto; säger till webbläsaren att lägga till rullningslister om de behövs för att förhindra att texten överflödar gränserna för div. Men för att detta ska fungera behöver du också de bredd- och höjdstilegenskaper som är inställda på div så att det finns gränser att flyta över.

Du kan också klippa av texten genom att ändra överflöd: auto; till överflöd: dold; Om du utelämnar överflödesegenskapen sprider texten över div-gränserna.

Du kan lägga till rullningsfält till mer än bara text

Om du har en stor bild som du vill visa i ett mindre utrymme kan du lägga till rullningslister runt på samma sätt som med text.

I det här exemplet finns 400x509-bilden i ett 300x300-stycke.

Tabeller kan dra nytta av rullningsfält

Långa informationstabeller kan bli mycket svåra att läsa mycket snabbt, men genom att placera dem i en div av begränsad storlek och sedan lägga till överflödsegenskapen kan du generera tabeller med massor av data som inte tar extremt utrymme på din sida.

Det enklaste sättet är precis som med bilder och text, lägg bara till en div runt bordet, ställ in bredden och höjden på den diven och lägg till överflödsegenskapen:

... 

En sak som händer när du gör detta är att ett horisontellt rullningsfält vanligtvis visas eftersom webbläsaren antar att krom i rullningslisterna överlappar bordet. Det finns många sätt att åtgärda detta genom att ändra bredden på bordet och andra. Men vår favorit är att helt enkelt stänga av horisontell rullning med CSS 3-egenskapen överflöd-x

Bara Lägg till overflow-x: dold; till div, och det tar bort det horisontella rullningsfältet. Var noga med att testa detta, eftersom det kan finnas innehåll som försvinner.

Firefox stöder användning av TBODY-taggar för överflöde

En riktigt trevlig funktion i Firefox-webbläsaren är att du kan använda överflödsegenskapen på inre bordstaggar som tbody och thead eller tfoot. Detta innebär att du kan ställa in rullningslister i tabellinnehållet och rubrikcellerna förblir förankrade ovanför dem. Detta fungerar bara i Firefox, vilket är synd, men det är en trevlig funktion om dina läsare bara använder Firefox. Bläddra till detta exempel i Firefox för att se vad jag menar.

... NamePhoneJennifer502-5366. 

...