La propiedad text-overflow de CSS define cómo es que se mostrará el texto dentro en un contenedor de texto, en el caso en que este último no sea lo suficientemente grande como para almacenarlo. Cabe mencionar que esta propiedad solo mostrará su funcionamiento cuando el texto sobrepase el tamaño del contenedor.

Valores de text-overflow en CSS

Esta propiedad puede recibir cinco valores diferentes, aunque unos de ellos pueden mostrar los mismos resultados. Si se elije algún valor que no esté en la siguiente lista text-overflow tomará el valor por defecto.

clip
Este es el valor por defecto de la propiedad text-overflow. Corta el texto al límite del contenedor, sin importar si algún caracter está en ese lugar, si ese es el caso dicho caracter sera cortado hasta el límite.

ellipsis
Corta el texto al límite del contenedor, demostrando este corte con la cadena “…” concatenada al texto contenido.

<string>
Corta el texto al límite del contenedor, demostrando este corte con la cadena especificada concatenada al texto contenido. Cabe mencionar que este valor solo es aceptado en el navegador Mozilla Firefox.

initial
Toma el valor inicial o por defecto que tiene esta propiedad, es decir, “clip”.

Utilización de text-overflow en CSS

Para poder utilizar esta propiedad se le deben definir dos propiedades extra al contenedor, para que este no se ajuste a su contenido. Estas propiedades son:

A continuación, solo resta definir que valor tendrá la propiedad text-overflow, para mostrar el contenido.

Ejemplos de text-overflow en CSS

Puede comprobar su funcionamiento en el siguiente enlace: Ejemplo

CSS

HTML

Resultado

Compatibilidad de text-overflow en CSS

Esta propiedad es soportada por todos los navegadores desde versiones muy tempranas de los mismos, al menos con sus valores básicos (clip y ellipsis), aunque algunos necesitan un prefijo, como es el caso de Internet Explorer y Opera. Sin embargo, el valor de <string> es únicamente soportado en Mozilla Firefox.