CSS | Desbordamiento

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *