La propiedad text-overflow en CSS se ocupa de situaciones en las que el texto se recorta cuando desborda el cuadro del elemento. Se puede recortar (es decir, cortar, ocultar), mostrar puntos suspensivos (…, valor de rango Unicode U + 2026) o mostrar una cadena definida por el autor (no hay soporte actual del navegador para cadenas definidas por el autor).
Tenga en cuenta que text-overflow solo ocurre cuando la propiedad overflow del contenedor tiene el valor hidden, scroll o auto y white-space: nowrap;.
El desbordamiento de texto solo puede ocurrir en elementos de nivel de bloque o bloque en línea, porque el elemento debe tener un ancho para que se desborde. El desbordamiento ocurre en la dirección determinada por la propiedad de dirección o atributos relacionados.
La siguiente demostración muestra el comportamiento de la propiedad text-overflow incluyendo todos los valores posibles. ¡La compatibilidad con el navegador varía!
Configuración overflow a scroll o auto mostrarán barras de desplazamiento para revelar el texto adicional, mientras que hidden no lo hará. El texto oculto se puede seleccionar seleccionando los puntos suspensivos.
Cosas antiguas
Una versión antigua de la especificación dice que podría usar una URL para una imagen para los puntos suspensivos, pero se ve como si se descartó.
Hay una sintaxis de dos valores, p. ej. text-overflow: ellipsis ellipsis;, que controlaría el desbordamiento en los lados izquierdo y derecho del mismo contenedor. No estoy seguro de cómo sería posible lograrlo. ¿Quizás texto centrado en un contenedor demasiado pequeño? La nueva especificación dice que esto, además de definir una cadena, está «en riesgo».
No estoy seguro de dónde vino ellipsis-word. No está en la especificación o en cualquier otra documentación que no sea WebPlatform.org.
La propiedad text-overflow solía ser una abreviatura de la combinación de text-overflow-mode y text-overflow-ellipsis, pero ya no y esas propiedades separadas no existen.
Propiedades relacionadas
-
white-space -
overflow -
word-break -
width