En HTML-ruta är en ruta som lägger till rullningslister till höger och botten när innehållet i rutan är större än boxens dimensioner. Med andra ord, om du har en låda som kan passa omkring 50 ord, och du har en text på 200 ord, kommer en HTML-ruta att sätta upp rullningsfälten för att låta dig se de ytterligare 150 orden. I standard HTML som bara skulle trycka extra text utanför rutan.
Att göra HTML-rullning är ganska enkelt. Du behöver bara ställa in bredden och höjden på det element som du vill rulla och använd sedan CSS-överflödesegenskapen för att ställa in hur du vill att rullningen ska ske.
Vad ska man göra med extra text?
När du har mer text än vad som passar in i utrymmet på din layout, har du några alternativ:
- Skriv om texten så att den är kortare och passar.
- Låt texten flyta bortom gränserna och hoppas att layouten kan böjas för att stödja den.
- Klipp av texten där den överflödar.
- Lägg till rullningslister (vanligtvis vertikalt för text) så att utrymmet rullar för att visa extratexten.
Det bästa alternativet är typiskt det sista alternativet: skapa en rullningslådan. Då kan extra text fortfarande läsas, men din design äventyras inte.
HTML och CSS för detta skulle vara:
De
överflöde: auto;
berättar att webbläsaren lägger till rullningsfält om de behövs för att hålla texten borta från gränserna för div. Men för att detta ska fungera behöver du också bredd- och höjdstilsegenskaperna som är inställda på diven, så att det finns gränser att översvämma.
Du kan också klippa av texten genom att ändra övergång: auto; att översvämma: gömd ;. Om du lämnar överfyllningsegenskapen kommer texten att spilla över gränserna för div.
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 rullningsfält runt det på samma sätt som du vill med text.
I det här exemplet är 400x509-bilden inuti ett 300x300 stycke. Långa informationstabeller kan bli mycket svåra att läsa mycket snabbt, men genom att placera dem inuti en div av begränsad storlek och sedan lägga till överfyllningsegenskapen kan du skapa tabeller med mycket data som inte tar upp extremt utrymme på din sida . Det enklaste sättet är precis som med bilder och text, lägg bara till en div runt bordet, sätt bredden och höjden på den diven och lägg till överfyllningsegenskapen: En sak som händer när du gör det här är en horisontell rullningsfält som vanligtvis visas eftersom webbläsaren antar att krombärrens krom överlappar bordet. Det finns många sätt att fixa detta från att ändra bredden på bordet och andra. Men min favorit är att helt enkelt stänga av horisontell rullning med egenskapen CSS 3 överströmnings-x . Bara Lägg till överflöde-x: dolda; till div, och det kommer att ta bort den horisontella rullningsfältet. Var noga med att testa detta, eftersom det kan finnas innehåll som försvinner.
Tabeller kan dra nytta av rullningsstänger
namn Telefon Jennifer 502-5366
