En diseño web puede suceder que el contenido de un elemento HTML sea mayor que las dimensiones de la caja. Esto se produce cuando se ha definido un tamaño que no permite suficiente espacio para acomodar el contenido; en caso contrario, el navegador web habría calculado el tamaño de forma automática.
Vamos a ver un ejemplo de desbordamiento de texto, en el que forzamos la altura de la caja para que el texto tenga que sobresalir:
.desborda {
border: 1px dotted #ff7f2a;
padding: 5px;
height: 42px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Si no hubiéramos definido esta altura fija de 42 píxeles, el navegador web habría calculado el alto del elemento de forma automática.
Sin embargo, si queremos que la caja del elemento HTML en cuestión tenga una altura fija y al mismo tiempo queremos evitar que el contenido desborde, podremos hacerlo con las siguientes propiedades CSS:
| Propiedad | Descripción |
|---|---|
overflow | Define el desbordamiento del contenido. |
overflow-x | Define el desbordamiento en el eje horizontal. |
overflow-y | Define el desbordamiento en el eje vertical |
Si queremos controlar mejor el desbordamiento de texto, como indicar al usuario que hay texto escondido, o queremos romper las palabras demasiado largas que desbordan de la caja, podremos hacerlo con las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
overflow-wrap | Evita que el texto desborde de la caja. |
word-break | Rompe las palabras que desbordan. |
hyphens | Indica el tipo de separación silábica. |
text-overflow | Indica que hay texto invisible que se desborda. |
Desbordamiento del contenido
Para tratar el desbordamiento, CSS publicó en el nivel 2 la propiedad overflow. Gracias a esta propiedad se puede indicar si se desea recortar el contenido que sobresalga o si se quiere mostrar barras de desplazamiento para mostrar el contenido deslizándose en el eje horizontal o vertical.
Además, se puede modificar el desbordamiento de forma independiente en el eje horizontal con la propiedad overflow-x (la «x» indica el eje de las abscisas). Para modificar el desbordamiento en el eje vertical se usa la propiedad overflow-y (la «y» indica el eje de las ordenadas).
Valores para controlar el desbordamiento:
| Valor | Descripción |
|---|---|
visible | Valor por defecto. El contenido que sobresale será visible. Se permite el desbordamiento. |
hidden | Se oculta el contenido que sobresale, por lo que no hay desbordamiento (se esconde). |
scroll | Aparecen las dos barras de desplazamiento (horizontal y vertical) para poder ver el contenido que sobresale. |
auto | Aparecen las barras de desplazamiento si es necesario: sólo la horizontal, sólo la vertical, las dos o ninguna. |
clip | Solo para la propiedad overflow. El contenido que sobresale queda invisible, pero no se reduce el tamaño de la caja. Además, no permite el desplazamiento. |
Si el valor es visible, siempre se desbordará. En cambio, si el valor es hidden, el contenido que sobresale quedará escondido, como si se tratara de una ventana y mirásemos a través de ella: una parte del exterior queda escondida.
.esconde {
border: 1px dotted #ff7f2a;
padding: 5px;
overflow: hidden;
height: 42px;
}
Tal y como se puede ver en este ejemplo, parte del contenido que habría desbordado queda oculto a partir de los 42 píxeles de altura:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Por tanto, vamos a colocar una barra de desplazamiento vertical:
.vertical {
border: 1px dotted #ff7f2a;
padding: 5px;
overflow-y: scroll;
height: 42px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Con la propiedad overflow-y y el valor scroll forzamos la barra de desplazamiento vertical. Con overflow: auto obtendríamos el mismo resultado: el navegador vería que el contenido es mayor que el tamaño indicado, por lo que insertaría la misma barra de desplazamiento.
Ahora vamos a colocar la barra de desplazamiento horizontal:
.horizontal {
border: 1px dotted #ff7f2a;
padding: 5px;
overflow-x: scroll;
height: 42px;
width: 100%;
white-space: pre;
}
Resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Para poder visualizar el resultado se especifica un ancho del 100%, ajustando el texto a la totalidad del elemento padre, que en este caso es <blockquote>. También se añade la propiedad white-space: pre para que el texto no fluya hacia abajo sino hacia la derecha.
Desbordamiento de texto
El desbordamiento de texto puede llegar a ser algo más complejo. Por ejemplo, puede darse el caso en el que tengamos palabras muy largas que sobresalen hacia el exterior de la caja del elemento. Existe algunas propiedades para solucionar este problema: ya sea indicando al usuario que hay texto invisible que desborda o rompiendo palabras largas, incluso con partición silábica.
Evitar el desborde: la propiedad ‘overflow-wrap’
La propiedad overflow-wrap permite ajustar el texto cuando desborde de la caja del elemento. Es una propiedad que se aplica al contenido textual, y con ella se establece si el navegador web debe insertar saltos de línea en medio de algunas palabras demasiado largas, para evitar que desborden.
Esta propiedad fue creada por Microsoft con el nombre word-wrap. A pesar de que este nombre sigue teniendo soporte en los navegadores web, lo más recomendable es usar overflow-wrap en su lugar.
Hay que tener presente que la propiedad overflow-wrap solo funcionará si se usa overflow: hidden y white-space: nowrap.
Los valores de overflow-wrap son una serie de palabras clave que permiten tanto romper palabras que desbordan como romper la línea en cualquier lugar. El valor por defecto es normal, con el que las palabras no se rompen.
| Valor | Descripción |
|---|---|
normal | Las palabras largas no se rompen. |
break-word | Rompe las palabras que desbordan. |
anywhere | Rompe la línea en cualquier lugar. |
Veamos un ejemplo. Creamos una caja con una anchura máxima de 100 píxeles e introducimos el valor del número Pi con 16 decimales. Al no tener espacios, por defecto el navegador los mantendrá unidos. No especificamos una altura para provocar que el navegador la ajuste automáticamente.
Código CSS:
.con-desborde {
border: 1px dotted #ff7f2a;
display: inline-block;
padding: 5px;
overflow-wrap: normal;
max-width: 100px;
}
El valor de Pi es 3,1415926535897932.
Se puede ver como el valor de Pi sobresale por la derecha.
Ahora vamos a forzar la rotura del valor de Pi:
.sin-desborde {
overflow-wrap: break-word;
}
El valor de Pi es 3,1415926535897932.
Usando los valores break-word y anywhere, en el resultado veremos los decimales de Pi partidos, continuando en la línea siguiente.
Romper palabras: la propiedad ‘word-break’
La propiedad word-break permite romper palabras demasiado largas que desbordan de la caja. A diferencia de la propiedad anterior, word-break controla cómo se rompen las palabras al final de una línea. Los resultados de esta propiedad pueden ser muy similares a los de la propiedad overflow-wrap.
Lista de valores de la propiedad word-break:
| Valor | Descripción |
|---|---|
normal | Las palabras largas no se rompen. Por defecto. |
break-all | Rompe la palabra justo donde se desbordaría. |
keep-all | Evita la ruptura de palabras. Este valor es usado principalmente para textos en japonés, chino y coreano. Para el resto de idiomas, equivale a usar normal. |
El valor break-word equivalía a usar overflow-wrap: anywhere, por lo que pasó a ser obsoleto; ya no figura en el listado anterior.
En el siguiente ejemplo, vamos a romper el valor del número Pi:
.romper {
word-break: break-all;
}
El valor de Pi es 3,1415926535897932.
Tal y como se puede ver, la ruptura se produce antes del salto de línea. En cambio, usando la propiedad overflow-wrap, el salto de línea se produce al principio de la palabra y después de la ruptura.
En el siguiente ejemplo se muestra la diferencia de ruptura de palabras entre las propiedades overflow-wrap (arriba) y word-break (abajo). Se usa un texto con palabras bastante largas y un ancho de 120 píxeles.
Un electroencefalografista es una persona especializada en electroencefalografía.
Un electroencefalografista es una persona especializada en electroencefalografía.
En los dos ejemplos anteriores se puede observar que ambos casos evitan el desbordamiento del texto, pero lo hacen de forma diferente.
Separación silábica: la propiedad ‘hyphens’
La propiedad hpyhens permite especificar el tipo de separación silábica que se debe utilizar en el contenido textual. Separar las sílabas de las palabras que se encuentran al final de línea es un recurso literario muy utilizado, ya que permite que los textos se ajusten mejor a la anchura de la línea.
Cada idioma tiene sus propias reglas de separación silábica. Por esta razón, el navegador web tendrá en cuenta el atributo HTML lang para realizar una separación de sílabas correcta. Si este atributo no está declarado o falta el diccionario de separación, esta propiedad no funcionará.
Esta propiedad puede tener tres valores: el valor none evita la separación silábica, el valor manual separa las sílabas si se ha indicado manualmente, y con el valor auto el navegador separa sílabas de forma automática.
Hay dos caracteres Unicode para introducir la separación silábica manual: el carácter «fuerte» (guión ‐, carácter Unicode U+2010) que se mostrará incluso cuando no se requiere la separación de sílabas; y el carácter «suave» (carácter Unicode U+00AD o entidad HTML ­) que no se muestra (es invisible) hasta que sea posible realizar la separación silábica.
En el ejemplo siguiente se ha creado una caja que se puede redimensionar a partir de la esquina inferior derecha. Ajusta la anchura y observa los cambios de la separación silábica. Está establecido con el automático.
.silabas { hyphens: auto; }
Un electroencefalografista es una persona especializada en electroencefalografía.
En el caso de romper las palabras con la propiedad word-break y el valor break-all, la separación silábica de hyphens no funcionará.
Indicar el desborde: la propiedad ‘text-overflow’
La propiedad text-overflow permite indicar al usuario que hay contenido desbordado que no se está mostrando. Es importante recordar que esta propiedad no sirve para forzar que el texto desborde de la caja. Para forzar el desbordamiento del texto hay que usar las propiedades overflow y white-space:
.desborde {
overflow: hidden;
white-space: nowrap;
}
La indicación de que hay contenido desbordado se puede realizar mediante algún tipo de carácter que indique que el texto continúa, como suele ser el caso de los tres puntos suspensivos. Por ejemplo: «Había una vez…».
Los valores de la propiedad text-overflow son los siguientes:
| Valor | Descripción |
|---|---|
clip | El texto es cortado en seco, sin indicativo de ello. |
ellipsis | El corte del texto se produce de forma automática. |
Con el valor clip, el texto se quedará cortado en el límite de la zona de contenido del elemento. No se hace ningún indicativo del corte, más allá de que se verá un texto inacabado. Es el valor predeterminado de esta propiedad.
El valor ellipsis produce un corte de forma automática y añade los famosos tres puntos suspensivos (…, carácter Unicode U+2026) al final. Estos puntos suspensivos se muestran dentro de la zona de contenido.
.ellipsis {
text-overflow: ellipsis;
}
Resultado:
Si queremos cambiar el símbolo que el valor ellipsis usa por defecto, se puede indicar a continuación como una cadena de texto, entre comillas:
.corte-personalizado {
text-overflow: ellipsis " [...]";
}
Resultado:
