Generalidades
La propiedad CSS abreviada de desbordamiento de texto (text-overflow) establece cómo se indica a los usuarios el contenido de desbordamiento oculto. Puede recortarse, mostrar puntos suspensivos (' … ') o mostrar una cadena personalizada.
Esta propiedad text-overflow puede ser utilizada para “cortar” la extensión de un texto que exceda la medida del contenedor en el cual se encuentra, proveyendo de una muestra para que el usuario pueda interesarse en leer el texto completo.
Se le pueden asignar dos valores los cuales son clip y ellipsis, la diferencia entre estos dos valores es que el clip no cortará palabras mientras que ellipsis muestra tres puntos que se despliegan al final del texto de muestra indicando que existe más texto.
Esta propiedad solo se aplica al desbordamiento de texto en la dirección en línea (horizontal, en texto occidental normal). El desbordamiento en línea ocurre cuando el texto en una línea desborda el ancho disponible sin una oportunidad de interrupción. Para forzar que ocurra un desbordamiento y que se apliquen puntos suspensivos, el autor debe aplicar el valor nowrap a la propiedad de espacio en blanco en el elemento, o envolver el contenido en una etiqueta <NOBR>. Si no hay oportunidad de ruptura (por ejemplo, el ancho es estrecho o hay una palabra larga que no se rompe bien), entonces puede ocurrir un desbordamiento sin que se aplique nowrap.
Esta propiedad en el elemento debe establecerse en algo que no sea visible , el valor predeterminado, para que se representen los puntos suspensivos. La mejor opción es configurar el desbordamientoa escondido . La configuración de desbordamiento para desplazamiento o automático también funcionará, pero mostrará barras de desplazamiento.
El texto oculto se puede seleccionar seleccionando los puntos suspensivos. Cuando se selecciona, los puntos suspensivos desaparecerán y serán reemplazados por el texto en la extensión del área de diseño. Esta propiedad ofrece una alternativa eficiente a la construcción de elipses en HTML dinámico (DHTML). Dado que los puntos suspensivos se pueden representar muchas veces en una sola página, el uso de esta propiedad puede acelerar significativamente el rendimiento.
Definición formal
| Valor inicial | clip |
|---|---|
| Se aplica a | elementos de contenedores en bloque |
| Inherited | no |
| Valor calculado | como se especifica |
| Tipo de animación | discrete |
Pruébalo
💻 La propiedad de text-overflow no obliga a que se produzca un desbordamiento. Para hacer que el texto desborde su contenedor, debe establecer otras propiedades CSS: overflow y white-space . Por ejemplo:
overflow: hidden;
white-space: nowrap;
La propiedad de text-overflow solo afecta el contenido que desborda un elemento contenedor de bloque en su dirección de progresión línea (no el desbordamiento de texto en la parte inferior de un cuadro, por ejemplo).
Sintaxis
Los text-overflow propiedad de desbordamiento de texto puede especificarse utilizando uno o dos valores. Si se proporciona un valor, especifica el comportamiento de desbordamiento para el final de la línea (el extremo derecho para el texto de izquierda a derecha, el extremo izquierdo para el texto de derecha a izquierda). Si se dan dos valores, el primero especifica el comportamiento de desbordamiento para el extremo izquierdo de la línea y el segundo lo especifica para el extremo derecho de la línea.
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";
/ * Valores globales * /
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
- uno de los valores de la palabra clave:
clip,ellipsis,fade - la función
fade(), a la que se le pasa un<length>o un<percentage>para controlar la distancia de fade - a
<string>.
Sintaxis formal:
[ clip | ellipsis | <string> ]{1,2}Valores
clip-
El valor predeterminado para esta propiedad. El valor
clipcorta (a veces bruscamente) el texto excedente. Este valor de palabra clave truncará el texto en el límite del área de contenido , por lo tanto, el truncamiento puede ocurrir en el medio de un carácter. Para recortar la transición entre caracteres, puede especificartext-overflowcomo una cadena vacía, si eso es compatible con los navegadores de destino:text-overflow: '';. ellipsis-
El valor de esta palabra clave mostrará puntos suspensivos (
'…',U+2026 HORIZONTAL ELLIPSIS) para representar texto recortado. El valor ellipsis termina el texto cortado con puntos suspensivos. La elipsis se muestra dentro del área de contenido , disminuyendo la cantidad de texto mostrado. Si no hay suficiente espacio para mostrar los puntos suspensivos, se recorta. -
<string>Experimental El valorstringtermina el texto con una cadena de caracteres (string), por ejemplo ", etc.". -
La
<string>que se utilizará para representar el texto recortado. La cadena se muestra dentro del área de contenido , acortando el tamaño del texto mostrado. Si no hay suficiente espacio para mostrar la cadena en sí, se recorta. Solo funciona en Firefox -
fadeExperimental -
Esta palabra clave recorta el contenido desbordante de la línea y aplica un efecto de desvanecimiento cerca del borde de la caja de la línea con una completa transparencia en el borde.
-
fade( <length> | <percentage> )Experimental -
Esta función recorta el contenido desbordante de la línea y aplica un efecto de desvanecimiento cerca del borde de la caja de la línea con una transparencia completa en el borde.
El argumento determina la distancia sobre la cual se aplica el efecto de desvanecimiento. El
<percentage>se resuelve con el ancho del cuadro de línea. Los valores inferiores a0se recortan a0. Los valores mayores que el ancho del cuadro de línea se recortan al ancho del cuadro de línea.
La propiedad text-overflow no corta nada, solo sirve para indicar qué hacer (por ejemplo, insertar unos puntos suspensivos) en un texto que ya se ha cortado por overflow: hidden.
Ejemplo
El código es el siguiente:
<!doctype html>
<html>
<head>
<title>Html5</title>
<meta charset="utf-8">
<style type="text/css">
div { margin: 15px;
font-size: 150%;
width: 272px;
padding-left: 3px;
border: 1px solid silver;}
.nada { white-space:...Solemos usar la propiedad overflow, para decir si queremos que cuando el contenido de un bloque se sale de su contenedor se muestre, se oculte, salgan barras de desplazamiento… Y le da igual imágenes, tablas, texto…
En el caso del texto podríamos querer mostrar una previa, y señalar que hay una elipsis, es decir que pasando el ratón por encima o clicando se puede acceder al texto completo. Y aquí es donde entra text-overflow.
El valor por defecto del text-overflow-mode, es clip, recortar cuando haya overflow por el borde y listo. Lo podemos cambiar a ellipsis y ellipsis-word. Con el modo ellipsis, al llegar al límite mostrará un texto de continuación (por defecto “…”) y con ellipsis-word, lo muestra después de la última palabra que entre completa en el contenedor, no parte una palabra para poner el texto de elipsis.
También podemos cambiar el texto de elipsis. Poner una flecha o un “[ver]” (pongo ver y no más, porque las tildes en CSS son otro capítulo y no me quiero enrollar).
Todo suena muy bonito, aunque tiene sus trucos. El primero, bastante lógico, es que solo funciona en un contenedor que tenga la propiedad overflow con valor hidden. Aunque sea evidente, tengo que recordar que hay que dar un tamaño al contenedor, sino se expandirá para que entre el contenido.
Pero el detalle que nos puede descolocar e incluso ser molesto, es que es una propiedad de línea. Se dispara solo cuando la palabra es tan larga que no entra entera en su línea (osea una sola palabra llena toda la línea y aún así no entra), sino el texto seguirá en líneas inferiores y nunca veremos la elipsis.
A menos que forcemos a que el texto esté en una línea. Por eso, aunque es extraño, la activación y desactivación de la elipsis se hace con la propiedad white-space.
Con valor normal veremos el texto completo y con valor nowrap una previa con elipsis.
Ejemplo
El siguiente ejemplo muestra cómo usar puntos suspensivos, puntos suspensivos de palabra y valores de recorte para la propiedad de desbordamiento de texto.
<!-- Ejemplo que muestra la propiedad abreviada de desbordamiento de texto (text-overflow shorthand property
) -->
<div class="overflowed overflowed-clip">
<p>Este es un texto de ejemplo que no muestra nada interesante excepto el truncado contenido a través de la propiedad abreviada de desbordamiento de texto. </p>
</div>
<div class="overflowed overflowed-ellipsis">
<p>Este es un texto de ejemplo que no muestra nada interesante excepto el truncado contenido a través de la propiedad abreviada de desbordamiento de texto. </p></div>
<div class="overflowed overflowed-ellipsis-word">
<p>Este es un texto de ejemplo que no muestra nada interesante excepto el truncado contenido a través de la propiedad abreviada de desbordamiento de texto. </p>
</div>
.overflowed > p{
width: 10em;
height: 5em;
white-space: nowrap;
overflow: hidden;
}
.overflowed-clip {
text-overflow: clip;
color: green;
}
.overflowed-ellipsis > p {
text-overflow: ellipsis;
color: red;
}
.overflowed-ellipsis-word > p {
text-overflow: ellipsis-word;
color: orange;
}
Este es un texto de ejemplo que no muestra nada interesante excepto el truncado contenido a través de la propiedad abreviada de desbordamiento de texto.
Este es un texto de ejemplo que no muestra nada interesante excepto el truncado contenido a través de la propiedad abreviada de desbordamiento de texto.
Este es un texto de ejemplo que no muestra nada interesante excepto el truncado contenido a través de la propiedad abreviada de desbordamiento de texto.
