Aquest article mostra el mètode per evitar que el contingut es desbordi i habilitar el desplaçament mitjançant CSS.
Com aturar el desbordament de contingut i habilitar el desplaçament?
L'objectiu d'evitar que el contingut es desbordi és que el contingut encaixi dins del seu contenidor i no afecti negativament el rendiment del lloc web. Pot entendre fàcilment el context i pot millorar l'accessibilitat per als usuaris. Per a una explicació detallada, parlem amb un exemple:
Pas 1: habiliteu el desplaçament amb desbordament de contingut
Inicialment, comenceu creant una taula dins del fitxer HTML a la qual s'aplicarà l'efecte de desplaçament. Suposem que la taula ja està creada i consta de sis files i set columnes, i es proporcionen algunes dades simulades a la taula:
< taula >
< tr >
< th > Cap 1 < / th >
< th > Cap 2 < / th >
< th > Cap 3 < / th >
< th > Cap 4 < / th >
< th > Cap 5 < / th >
< th > Cap 6 < / th >
< th > Cap 7 < / th >
< / tr >
< tr >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< / tr >
< tr >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< / tr >
< tr >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< / tr >
< tr >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< / tr >< tr >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< / tr >
< tr >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< / tr >
< / taula >
Després de l'execució del fragment de codi anterior, la pàgina web apareix així:
La sortida mostra que les dades de la taula estan en un format menys llegible i que la taula adquireix molt d'espai.
Pas 2: Configuració de l'efecte de desbordament i desplaçament Al fragment de codi anterior: Després de l'execució del fragment de codi anterior, la pàgina web apareix així: La pàgina web il·lustra que la taula ara consumeix menys espai i evita que el contingut es desbordi. A més, s'ha habilitat l'efecte de desplaçament. Nota : configurant “ desbordament: automàtic ' o ' desbordament: desplaçar-se ”, els usuaris poden habilitar el desplaçament per a contingut desbordant. A més, el “ desbordament: amagat ” es pot utilitzar per evitar el desbordament del tot. Les propietats 'desbordament-x' i 'desbordament-y' s'utilitzen per controlar el desbordament i permetre el desplaçament a l'eix horitzontal i vertical. Evita que el contingut es desbordi i permet el desplaçament per fer un disseny responsiu interactiu per a tots els dispositius. Aquest article ha demostrat com evitar que el contingut es desbordi i habilitar el desplaçament mitjançant CSS.
Després d'això, emboliqueu la taula amb un pare '
.desbordament {
amplada : 200 píxels ;
alçada : 200 píxels ;
desbordament-x : automàtic ;
desbordament-y : automàtic ;
comportament de desplaçament : llis ;
}
Conclusió