Ya sea que esté creando diseños desde cero o personalizando diseños prediseñados, es probable que se encuentre con algunos problemas de alineación.
Por ejemplo, suponga que tiene una imagen destacada en la parte superior de su página de inicio. A continuación tienes algunos elementos div que contienen texto. Tal vez se parece a algo Demostración de la página de inicio de WP SEO abajo.
Fuente de imagen
Ahora imagine si uno de los tres párrafos debajo de los encabezados contiene muchas oraciones en lugar de solo una. Esto haría que el texto fuera demasiado grande para caber en el área especificada y podría provocar la superposición con otros elementos de la página. Esto se conoce como desbordamiento de CSS.
¿Qué es el desbordamiento de CSS?
En CSS, el desbordamiento se refiere a cualquier contenido que sea demasiado grande para un cuadro de elementos. Esto sucede cuando un elemento de bloque tiene una altura específica que es demasiado pequeña para su contenido. Puede usar la propiedad de desbordamiento de CSS para controlar lo que sucede con el desbordamiento.
Antes de echar un vistazo más de cerca a la propiedad de desbordamiento, expliquemos qué entendemos por «cuadro de elementos». De acuerdo con el modelo de caja CSS, se genera una caja rectangular para elementos HTML. Este cuadro tiene cuatro capas: solo contenido, relleno, borde y margen, como se muestra a continuación.
Cuando el contenido de un elemento HTML se extiende más allá de cualquier borde de campo, ya sea un borde de contenido, un borde de relleno, un borde de borde o un borde de margen, esto se denomina desbordamiento.
Propiedad de desbordamiento de CSS
La propiedad de desbordamiento de CSS proporciona varias opciones para controlar el desbordamiento. Puede dejar que el contenido se represente fuera del marco del elemento, recortar el contenido o recortar el contenido y agregar una barra de desplazamiento. Para hacer esto, debe usar los siguientes valores de propiedad. Miremos más de cerca.
Desbordamiento de CSS visible
Visible significa que el desbordamiento no se recortará. En su lugar, se representará fuera del marco del elemento y, potencialmente, se superpondrá a otros elementos de la página.
De forma predeterminada, la propiedad de desbordamiento de CSS está configurada como visible. Esto significa que no necesita establecer la propiedad de desbordamiento de CSS en «visible» a menos que esté anulando el CSS en una hoja de estilo externa o en otro lugar de su sitio web.
Veamos un ejemplo.
Aquí está el CSS:
#example1 { background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
height: 170px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
overflow: visible;
}
#example2 {
background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
}
Aquí está el código HTML:
<h2>CSS Overflow Visible</h2><p>Overflow:visible means that the overflow will render outside the element’s box and potentially overlap with other elements on the page, as shown below. Since the CSS overflow property is set to visible by default, you don't have to define it in your CSS. I did just for the sake of this demo.</p>
<div id="example1">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div id="example2">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
Aquí está el resultado:
Exceso oculto de CSS
Para evitar que el desbordamiento se represente fuera del marco del elemento, puede establecer la propiedad de desbordamiento en «oculto». Esto recortará el contenido en el borde del relleno de la caja y evitará que el usuario vea el contenido más allá de ese borde desplazándose o arrastrando en la pantalla táctil o de cualquier otra forma.
Sin embargo, este valor aún permite el desplazamiento de software, lo que significa que el cuadro es técnicamente un contenedor de desplazamiento. El usuario podrá utilizar los mecanismos definidos por Módulo de vista CSSOMpor ejemplo, para ver contenido oculto.
Veamos un ejemplo:
Aquí está el CSS:
#example1 { background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
height: 170px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
overflow: hidden;
}
#example2 {
background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
}
Aquí está el código HTML:
<h2>CSS Overflow Hidden</h2><p>Overflow:hidden means that the overflow will not render outside the element’s box. Instead, it will be clipped at the box's padding edge. This value differs from "clip" in that it still allows programmatic scrolling, which means the box is technically a scroll container.</p>
<div id="example1">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div id="example2">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
Aquí está el resultado:
Desbordamiento de CSS de desplazamiento
Si desea ocultar el desbordamiento para que no se represente fuera del marco del elemento pero permitir que los usuarios vean ese contenido, puede establecer la propiedad de desbordamiento en «desplazamiento». El rebosadero aún se recortará en el borde del revestimiento de la caja. Sin embargo, se agregará una barra o panel de desplazamiento para que los usuarios puedan desplazarse para ver contenido que es invisible.
Aquí hay un ejemplo.
Aquí está el CSS:
#example1 { background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
height: 170px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
overflow: scroll;
}
#example2 {
background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
}
Aquí está el código HTML:
<h2>CSS Overflow Scroll</h2><p>Overflow:scroll means that the overflow will be clipped at the box's padding edge, but a scrolling mechanism will be added so that users will be able to scroll to see the content that isn't visible. In the example below, a scrollbar is added. </p>
<div id="example1">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div id="example2">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
Aquí está el resultado:
Desbordamiento de CSS automáticamente
El valor «automático» es similar al desplazamiento, pero solo agrega una barra de desplazamiento si el campo tiene un desbordamiento.
En el siguiente ejemplo, ambos divs se definen con desbordamiento: auto. Sin embargo, solo uno tiene un desbordamiento de desplazamiento y una barra de desplazamiento. El segundo no lo es.
Aquí está el CSS:
#example1 { background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
height: 170px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
overflow: auto;
}
#example2 {
background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
overflow: auto;
}
Aquí está el código HTML:
<h2>CSS Overflow Auto</h2><p>Overflow:auto means that the overflow will be clipped at the box's padding edge and a scroll bar will be added if necessary. Meaning, the box has scrollable overflow. In the example below, the first div has overflow and therefore a scrollbar and the second div does not. </p>
<div id="example1">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
<div id="example2">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
Aquí está el resultado:
Nota: Bootstrap CSS solo admite dos valores de propiedad de desbordamiento de forma predeterminada. Esto incluye valores automáticos y ocultos.
En los ejemplos anteriores, usamos la propiedad de desbordamiento abreviada. Esta es una abreviatura de las propiedades overflow-x y overflow-y. Echemos un vistazo más de cerca a estas dos propiedades a mano alzada a continuación.
Desbordamiento de CSS-x
La propiedad overflow-x se utiliza para controlar el desbordamiento horizontal o el desbordamiento hacia la izquierda y la derecha de un campo de elemento.
Veamos el ejemplo a continuación.
Aquí está el CSS:
#example1 { width: 400px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
}
#example2 {
background-color: #EEEEEE;
box-sizing: border-box;
width: 400px;
padding: 30px;
border: 1px solid #000000;
}
Aquí está el código HTML:
<h2>CSS Overflow-x and Overflow-y Properties</h2><p>Instead of using the shorthand overflow property, I can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I set overflow-x to scroll so I can scroll from left to right to view the image. But I set the overflow-y to hidden so I can't scroll up and down.</p>
<div id="example1">
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
<div id="example2">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
Aquí está el resultado:
Desbordamiento de CSS
La propiedad overflow-y se usa para controlar el desbordamiento vertical o el desbordamiento en la parte superior e inferior del campo de un elemento.
Invirtamos los valores del ejemplo anterior.
Aquí está el CSS:
#example1 { width: 400px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
#example2 {
background-color: #EEEEEE;
box-sizing: border-box;
width: 400px;
padding: 30px;
border: 1px solid #000000;
}
Aquí está el código HTML:
<h2>CSS Overflow-x and Overflow-y Properties</h2><p>Instead of using the shorthand overflow property, I can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I set overflow-x to hidden so I can't scroll up and down. But I set the overflow-y to scroll so I can scroll up and down to view the image.</p>
<div id="example1">
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
<div id="example2">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</div>
Aquí está el resultado:
Puede usar la propiedad de acceso directo de desbordamiento en lugar de definir las propiedades overflow-x y overflow-y. Si se especifican dos valores, el primero representa desbordamiento-x y el segundo representa desbordamiento-y. Si solo hay un valor, se aplica a las propiedades overflow-x y overflow-y. Por ejemplo, si definí un div que contiene una imagen con desbordamiento: scroll; entonces la imagen se puede desplazar horizontal y verticalmente.
Desbordamiento de CSS
La propiedad overflow-wrap de CSS se utiliza para determinar las circunstancias en las que el navegador puede dividir una línea de texto en varias líneas. Sin esta propiedad, una cadena de texto demasiado larga para caber en el cuadro de línea sería irrompible y se desbordaría.
Para usar la propiedad overflow-wrap, la propiedad de espacio en blanco debe estar ajustada. Esto significa que la propiedad de espacio en blanco se puede establecer en «normal», «pre-wrap» y «break-spaces» o «pre-line». La mayoría de las veces verá que está configurado en «normal».
Hay tres valores posibles para definir la propiedad overflow-wrap. Se definen brevemente a continuación.
- Normal: Las líneas solo se rompen en puntos de ruptura no forzados, como un espacio entre dos palabras.
- En cualquier sitio: Las líneas pueden romperse en puntos de ruptura forzados si no hay puntos de ruptura no forzados. Por ejemplo, una palabra larga o URL se puede dividir para ajustarse a otra línea. No se inserta ningún guión en el punto de interrupción. Con este valor, la capacidad de minimizar la cantidad de contenido que excede la línea ajustando la línea en el punto de interrupción se tiene en cuenta al calcular los tamaños internos del contenido mínimo o el tamaño más pequeño que puede tomar el campo sin causar un desbordamiento.
- Separación de palabras: Las líneas pueden romperse en puntos de ruptura forzados si no hay puntos de ruptura no forzados. No se inserta ningún guión en el punto de interrupción. Sin embargo, con este valor, hay oportunidades para minimizar la cantidad de contenido que cruza la línea ajustando la línea en el punto de interrupción. no en cuenta a la hora de calcular las dimensiones interiores del contenido mínimo o el tamaño más pequeño que puede llevar la caja sin que se produzca un desbordamiento.
Veamos un ejemplo que muestra cada uno de estos valores a continuación.
Aquí está el CSS:
.wrap { width: 200px;
margin: 5px;
background: #AACC88;
}
#example1 {
white-space: normal;
overflow-wrap: normal;
}
#example2 {
white-space: normal;
overflow-wrap: anywhere;
}
#example3 {
white-space: normal;
overflow-wrap: break-word;
}
Aquí está el código HTML:
<h2>CSS Overflow Wrap</h2><p>The CSS overflow-wrap property is used to specify the circumstances in which the browser can break a line of text that's too long to fit within the line box onto multiple lines to prevent overflow. You can either define the property with "normal" so that lines only break at unforced break points, like the space between two words, or with the values "anywhere" or "break-word" so that lines can break anywhere to prevent overflow.</p>
<p class="wrap">This is dummy text. <strong id="example1">Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.
</p>
<p class="wrap">This is dummy text. <strong id="example2">Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.
</p>
<p class="wrap">This is dummy text. <strong id="example3">Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.
</p>
Aquí está el resultado:
Desbordamiento de texto CSS
La propiedad de desbordamiento de texto CSS se usa para controlar cómo se representa la página de contenido en línea que excede el elemento contenedor de bloques.
Para usar la propiedad de desbordamiento de texto CSS, el elemento contenedor del bloque debe estar definido por una propiedad de desbordamiento con un valor que no sea «visible». La mayoría de las veces esto se denominará «desbordamiento: oculto». Además, debe estar definido por la propiedad de espacio en blanco y establecerse en «nowrap». De lo contrario, el contenido en línea se ajustará a la siguiente línea en lugar de recortarse.
Hay dos valores para la propiedad de desbordamiento de texto CSS. Echemos un vistazo a ellos a continuación.
Clip de desbordamiento de CSS
Establecer la propiedad de desbordamiento de texto CSS en «recortar» cortará el contenido en línea que desborda el elemento contenedor de bloques en el borde del relleno. Por lo tanto, los visitantes no podrán ver el contenido más allá del borde donde se recorta.
Esto es casi idéntico al valor «oculto» para la propiedad de desbordamiento de CSS. La diferencia es que el clip prohíbe cualquier tipo de desplazamiento, incluido el desplazamiento por software. Esto significa que el cuadro de elemento no es un contenedor de desplazamiento.
Veamos el ejemplo a continuación.
Aquí está el CSS:
div { overflow: hidden;
white-space: nowrap;
width: 400px;
text-overflow: clip;
border: 1px solid #AAAAAA;
}
Aquí está el código HTML:
<h2>CSS Text Overflow Clip</h2><p>The div below is defined by the overflow property and set to "hidden" and the white-space property set to "nowrap." That means you can apply the text-overflow property to the div. By setting it to "clip," the text contained inside the div will be clipped at the div's padding edge. Only the first line of the paragraph will show.</p>
<div>This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</div>
Aquí está el resultado:
Puntos suspensivos de desbordamiento de CSS
Tiene la opción de establecer la propiedad de desbordamiento de texto CSS en «puntos suspensivos» como desee. Esto cortará el contenido en línea que desborda el elemento contenedor de bloques en el borde de relleno, y un poco más para que coincida con los puntos suspensivos. Este valor también impide el desplazamiento, incluido el desplazamiento programático que le dice al navegador que el campo del elemento no es un contenedor de desplazamiento. Por lo tanto, los visitantes no podrán ver el contenido más allá del borde donde se recorta.
Aquí hay un ejemplo.
Aquí está el CSS:
div { overflow: hidden;
white-space: nowrap;
width: 600px;
text-overflow: ellipsis;
border: 1px solid #AAAAAA;
}
Aquí está el código HTML:
<h2>CSS Text Overflow Ellipsis</h2><p>The div below is defined by the overflow property and set to "hidden" and the white-space property set to "nowrap." That means you can apply the text-overflow property to the div. By setting it to "ellipsis," the text contained inside the div will be clipped at the div's padding edge. Some of the characters will also be replaced by the ellipsis character.</p>
<div>This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</div>
Aquí está el resultado:
Controlando el desbordamiento en sus sistemas
El desbordamiento es un problema común con el que probablemente te encontrarás creando diseños desde cero o personalizando diseños prediseñados. Comprender cómo controlar esto asegurará que pueda crear y ajustar sus diseños sin comprometer la alineación o el posicionamiento. Afortunadamente, solo necesitas conocimientos básicos de diseño web para esto.
Publicado originalmente el 20/11/2020 7:00:00 a. m., actualizado el 12 de enero de 2021
