desbordamiento de la propiedad en CSS

CSS | desbordamiento de la propiedad : Aquí, vamos a aprender sobre la desbordamiento de la propiedad con la sintaxis y ejemplos de CSS .

CSS | desbordamiento de la propiedad

El propiedad overflow en el CSS se utiliza para especificar qué sucede cuando contenido CSS desborda el cuadro de elemento.

Sintaxis:

    Element {
overflow: overflow value;
}

A continuación se algunos valores class propiedad overflow ,

  • desbordamiento: envoltura
  • overflow: scroll
  • desbordamiento-x y el desbordamiento-y
  • desbordamiento visible
  • overflow: hidden
  • overflow: auto

saber Vamos ahora acerca de ellos.

1) desbordamiento: envoltura

desbordamiento-wrap indica al navegador que puede for una línea de texto dentro de un elemento apuntado en varias líneas en un lugar de lo contrario irrompible.

Esta propiedad se especifica como una sola palabra clave elegida de la lista de valores por debajo,

  • normales : Vamos a un desbordamiento de palabra si es más largo de la línea.
  • break -word : Se divide una palabra en varias líneas, si es necesario.
  • hereda : Hereda el valor del elemento padre break esta propiedad.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
background: red;
width: 50%;
height: 100px;
overflow-wrap: normal;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>

salida

overflow Property in CSS - 4

En el ejemplo anterior, una normal de propiedad overflow en aplicada que permite la palabra de desbordamiento.

2) overflow: scroll

Esta propiedad se utiliza para desplazar el contenido disponible con el desplazamiento para ver el contenido desborda.

La mayoría de los navegadores de escritorio mostrarán ambas barras de desplazamiento horizontal y vertical, ya sea o no cualquier contenido es recortado. Esto puede evitar problemas con las barras de desplazamiento que aparecen y desaparecen en un entorno dinámico.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
background: yellow;
width: 50%;
height: 100px;
border: 2px solid blue;
overflow: scroll;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>

salida

overflow Property in CSS - 5

En el ejemplo anterior, la propiedad desbordamiento de desplazamiento se aplica al elemento que permite que sea desplazable si el contenido no encaja.

3) overflow-x y el desbordamiento-y

Estas dos propiedades funcionan de manera similar como el propiedad overflow y aceptan los mismos valores. El -x desbordamiento parámetro sólo funciona en X o eje de izquierda a derecha. Los obras de desbordamiento-y en Y o eje de arriba a abajo.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 100px;
height: 200px;
border: 2px solid blue;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>

salida

overflow Property in CSS - 6

En el ejemplo anterior, -x desbordamiento y desbordamiento-y propiedad se aplica a oculta lo que el contenido en ambas direcciones es cortado.

4) overflow: visible

Esta propiedad se utiliza cuando el contenido no se recorta y se representará fuera de la caja de contenido si excede su tamaño contenedor.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 300px;
height: 100px;
border: 2px solid blue;
overflow: visible;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>

salida

overflow Property in CSS - 7

En el ejemplo anterior, la propiedad visible desbordamiento permite que el contenido más que el tamaño del elemento a ser visible para nosotros.

5) overflow: hidden

Esta propiedad se utiliza cuando se recorta el desbordamiento, y el resto del contenido está oculto.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 300px;
height: 100px;
border: 2px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>

salida

overflow Property in CSS - 8

En el ejemplo anterior, los desbordamiento oculta de propiedad cueros el contenido que más que el tamaño del elemento.

6) overflow: auto

El desbordamiento de CSS: la propiedad de auto es igual que el desbordamiento : propiedad scroll pero la diferencia es que la propiedad de auto añade las barras de desplazamiento sólo cuando son necesarios.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 300px;
height: 100px;
border: 2px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
</div>
<br/>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
</div>
</body>
</html>

salida

overflow Property in CSS - 9

En el ejemplo anterior, no se añaden las barras de desplazamiento, ya que no son necesarios.


Deja un comentario

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