En HTML-rulleboks er en boks, der tilføjer rullefelter til højre og nederst, når indholdet af ruten er større end boksens dimensioner. Med andre ord, hvis du har en kasse, der kan passe omkring 50 ord, og du har en tekst på 200 ord, vil en HTML-rulleboks sætte rullefelter op for at lade dig se de ekstra 150 ord. I standard HTML, der blot ville trykke på den ekstra tekst uden for boksen.
At lave HTML-rulle er ret nemt. Du skal blot indstille bredden og højden af det element, du vil rulle, og brug derefter CSS-overflowegenskaben til at indstille, hvordan du vil have scrollningen til at ske.
Hvad skal man gøre med ekstra tekst?
Når du har mere tekst end passer ind i rummet på dit layout, har du et par muligheder:
- Omskriv teksten, så den er kortere og passer.
- Tillad teksten at strømme ud over grænserne og håber, at layoutet kan bøjes for at understøtte det.
- Afskær teksten, hvor den overløb.
- Tilføj rullestænger (normalt lodret for tekst), så pladsen ruller for at vise ekstra tekst.
Den bedste mulighed er typisk den sidste mulighed: Opret en rullende tekstboks. Så kan ekstra tekst stadig læses, men dit design er ikke kompromitteret.
HTML og CSS for dette ville være:
Det
overløb: auto;
fortæller browseren at tilføje rullestænger, hvis de er nødvendige for at holde teksten fra overfyldte grænserne for div. Men for at dette skal fungere, har du også brug for bredden og højden stil egenskaber sat på div, så der er grænser for at overløb.
Du kan også afbryde teksten ved at ændre overløb: auto; at overløb: skjult ;. Hvis du forlader overløbsegenskaben, spildes teksten over grænserne af div.
Du kan tilføje rullebjælker til mere end bare tekst
Hvis du har et stort billede, som du gerne vil vise i et mindre rum, kan du tilføje rullefelter rundt om det på samme måde som du ville med tekst.
I dette eksempel er 400x509 billedet inde i et 300x300 afsnit. Lange informationskilder kan blive meget vanskelige at læse meget hurtigt, men ved at sætte dem inde i en div af begrænset størrelse og derefter tilføje overflowegenskaben, kan du generere tabeller med masser af data, der ikke optager ekstremt plads på din side . Den nemmeste måde er ligesom med billeder og tekst, skal du blot tilføje en div rundt om bordet, indstille bredden og højden af den div, og tilføj overflowegenskaben: En ting, der sker, når du gør dette, er en vandret rullepanel, der normalt vises, fordi browseren antager, at rullebjælkens krom overlapper bordet. Der er mange måder at løse dette på, når du ændrer bordets bredde og andre. Men min favorit er at bare slukke for vandret rullning med CSS 3-ejendommen overflow-x . Tilføj blot overløb-x: skjult; til div, og det vil fjerne den vandrette rullepanel. Sørg for at teste dette, da der kan være indhold, der forsvinder.
Tabeller kan drage fordel af rullestænger
Navn telefon Jennifer 502-5366
