Desbordamiento de texto - Trucos CSS

La text-overflowpropiedad en CSS se ocupa de situaciones en las que el texto se recorta cuando se desborda en 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).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Tenga en cuenta que text-overflowsolo ocurre cuando la overflowpropiedad del contenedor tiene el valor hidden, scrollo autoy white-space: nowrap;.

El desbordamiento de texto solo puede ocurrir en elementos de nivel de bloque o de bloque en línea, porque el elemento debe tener un ancho para poder desbordarse. 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 text-overflowpropiedad, incluidos todos los valores posibles. ¡El soporte del navegador varía!

¡Mira este bolígrafo!

Establecer overflowen scrollo automostrará barras de desplazamiento para revelar el texto adicional, mientras hiddenque no lo hará. El texto oculto se puede seleccionar seleccionando los puntos suspensivos.

Cosas viejas

Una versión anterior de la especificación dice que podría usar una URL para una imagen para los puntos suspensivos, pero parece que se eliminó.

Hay una sintaxis de dos valores, por ejemplo 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 ellipsis-wordvino. No está en la especificación ni en ninguna otra documentación que no sea WebPlatform.org.

La text-overflowpropiedad solía ser una abreviatura de la combinación de text-overflow-modey text-overflow-ellipsis, pero ya no y esas propiedades separadas no existen.