El desbordamiento de CSS controla el gran contenido. Indica si se debe recortar el contenido o agregar barras de desplazamiento. El desbordamiento contiene la siguiente propiedad:
- visible
- oculto
- Desplazarse
- auto
Visible: el contenido no se recorta y es visible fuera del cuadro del elemento.
Ejemplo:
html
<!DOCTYPE> <html> <head> <style> p { width:100px; height:80px; border:1px solid; overflow:visible; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body> </html>
Producción:
Oculto: el desbordamiento se recorta y el resto del contenido es invisible.
Ejemplo:
html
<!DOCTYPE> <html> <head> <style> p { width:100px; height:80px; border:1px solid; overflow:hidden; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body> </html>
Producción:
Desplazamiento: el desbordamiento se recorta pero se agrega una barra de desplazamiento para ver el resto del contenido. La barra de desplazamiento puede ser horizontal o vertical.
Ejemplo:
html
<!DOCTYPE> <html> <head> <style> p { width:120px; height:100px; border:1px solid; overflow:scroll; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body> </html>
Producción:
Auto: Agrega automáticamente una barra de desplazamiento cada vez que se requiere.
Ejemplo:
html
<!DOCTYPE> <html> <head> <style> p { width:120px; height:100px; border:1px solid; overflow:auto; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body> </html>
Producción:
Overflow-x y Overflow-y: esta propiedad especifica cómo cambiar el desbordamiento de elementos. x se ocupa de los bordes horizontales y y se ocupa de los bordes verticales.
Ejemplo:
html
<!DOCTYPE> <html> <head> <style> p { width:120px; height:100px; border:1px solid; overflow-x:scroll; overflow-y:hidden; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body> </html>
Producción:
Navegador compatible:
- Google cromo 1
- Borde 12
- explorador de Internet 4
- Firefox 1
- Ópera 7
- Safari 1
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA