Creeu un quadre amb el desplaçament de text usant CSS i HTML
Una caixa de desplaçament HTML és una caixa que afegeix barres de desplaçament a la part dreta i inferior quan els continguts del quadre són més grans que les dimensions del quadre. En altres paraules, si teniu una caixa que es pot ajustar al voltant de 50 paraules, i teniu text de 200 paraules, un quadre de desplaçament HTML posarà barres de desplaçament per permetre veure les 150 paraules addicionals. En HTML estàndard que simplement hauria de prémer el text extra fora de la casella.
Fer un seguit d'HTML és bastant fàcil. Només cal establir l'amplada i l'alçada de l'element que voleu desplaçar i, a continuació, utilitzar la propietat de desbordament de CSS per definir com voleu que es produeixi el desplaçament.
Què fer amb text extra?
Quan tingueu més text del que encaixi a l'espai del disseny, teniu algunes opcions:
- Torneu a redactar el text perquè sigui més curt i s'adapti.
- Permetre que el text passi més enllà dels límits i esperem que el disseny es pugui flexionar per suportar-lo.
- Retalla el text on es desborda.
- Afegiu barres de desplaçament (generalment verticals per a text) de manera que l'espai es desplaci per mostrar el text addicional.
La millor opció sol ser l'última opció: crear un quadre de text de desplaçament. A continuació, encara es pot llegir un text addicional, però el vostre disseny no està compromès.
HTML i CSS per a això seria:
El desbordament: automàtic; indica al navegador que afegeixi barres de desplaçament si són necessàries per evitar que el text es desbordi dels límits del div. Però, perquè això funcioni, també necessiteu les propietats d'estil d'ample i alçada establertes a la div, de manera que hi ha límits per desbordar-se.
També podeu tallar el text canviant el desbordament: automàtic; desbordar: amagat ;. Si deixeu de banda la propietat de desbordament, el text es vessarà sobre els límits del div.
Podeu afegir barres de desplaçament a més que només text
Si teniu una imatge gran que voleu visualitzar en un espai més reduït, podeu afegir barres de desplaçament al voltant de la mateixa manera que voleu amb el text.
En aquest exemple, la imatge de 400x509 està dins d'un paràgraf de 300x300.
Les taules es poden beneficiar de les barres de desplaçament
Les taules de dades llargues poden ser molt difícils de llegir amb molta rapidesa, però, si les hi afegiu una mida limitada i, a continuació, afegiu la propietat de desbordament, podeu generar taules amb moltes dades que no ocupen espai extrem a la vostra pàgina. .
La manera més senzilla és igual que amb les imatges i el text, només cal que afegiu un div al voltant de la taula, configureu l'amplada i l'alçada d'aquesta div i afegiu la propietat de desbordament:
| Name | Phone | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Una cosa que passa quan feu això és que una barra de desplaçament horitzontal sol aparèixer perquè el navegador suposa que el crom de les barres de desplaçament se solapa a la taula. Hi ha moltes maneres d'arreglar-ho per canviar l'amplada de la taula i altres. Però el meu preferit és simplement desactivar el desplaçament horitzontal amb el desbordament de la propietat CSS 3. Només cal que afegiu el desbordament-x: amagat; al div, i esborrarà la barra de desplaçament horitzontal. Assegureu-vos de provar-ho, ja que podria haver-hi contingut que desapareix. Firefox admet l'ús de les etiquetes TBODY per al desbordamentUna característica molt bona del navegador Firefox és que podeu utilitzar la propietat de desbordament a les etiquetes de la taula interna com tbody i thead o tfoot. Això significa que podeu establir barres de desplaçament a la taula continguts i les cel·les de capçalera romanen ancorades per sobre d'elles. Això només funciona a Firefox , que és massa dolent, però és una bona funció si els vostres lectors només usen Firefox. Navegueu a aquest exemple a Firefox per veure el que vull dir.
|