los text-overflowCSS La propiedad establece cómo se indica a los usuarios el contenido de desbordamiento oculto. Puede recortarse, mostrar puntos suspensivos (‘…‘), o mostrar un personalizado string.

los text-overflow la propiedad no fuerza a que se produzca un desbordamiento. Para hacer que el texto se desborde en su contenedor, debe establecer otras propiedades CSS: overflow y white-space. Por ejemplo:

overflow: hidden;white-space: nowrap;

los text-overflow La propiedad solo afecta al contenido que desborda un elemento contenedor de bloque en su en línea dirección de progresión (no texto desbordado en la parte inferior de un cuadro, por ejemplo).

Sintaxis

los text-overflow La propiedad se puede especificar usando 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.

Cada valor se especifica como uno de:

  • uno de los valores de la palabra clave: clip, ellipsis, fade
  • la función fade(), que se pasa un o un para controlar la distancia de desvanecimiento
  • a .

Valores

clip
El valor predeterminado de esta propiedad. Este valor de palabra clave truncará el texto en el límite del área de contenido, por lo que el truncamiento puede ocurrir en medio de un carácter. Para recortar en la transición entre caracteres, puede especificar text-overflow como un vacio string, si es compatible con sus navegadores de destino: text-overflow: '';.
ellipsis
El valor de esta palabra clave mostrará puntos suspensivos ('…', U+2026 Horizontal Ellipsis) para representar texto recortado. 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.
Esta es una API experimental que no debe usarse en código de producción.
los que se utilizará para representar texto recortado. los string se muestra dentro del área de contenido, acortando el tamaño del texto mostrado. Si no hay suficiente espacio para mostrar el string sí mismo, está recortado.
fade Esta es una API experimental que no debe usarse en código de producción.
Esta palabra clave recorta el contenido en línea desbordado y aplica un efecto de desvanecimiento cerca del borde del cuadro de línea con transparencia completa en el borde.
fade( | ) Esta es una API experimental que no debe usarse en código de producción.
Esta función recorta el contenido en línea desbordado y aplica un efecto de desvanecimiento cerca del borde del cuadro de línea con transparencia completa en el borde.
El argumento determina la distancia sobre la que se aplica el efecto de desvanecimiento. los se resuelve contra el ancho del cuadro de línea. Valores inferiores a 0 están recortadas a 0. Los valores mayores que el ancho del cuadro de línea se recortan al ancho del cuadro de línea.

Definicion formal

Valor inicial clip
Se aplica a bloque de elementos de contenedor
Heredado no
Valor calculado Como se especificó
Tipo de animación discreto

Sintaxis formal

[ clip | ellipsis |]1,2

Ejemplos de

CSS

pwidth: 200px;border: 1px solid;padding: 2px 5px;/* BOTH of the following are required for text-overflow */white-space: nowrap;overflow: hidden;.overflow-visiblewhite-space: initial;.overflow-cliptext-overflow: clip;.overflow-ellipsistext-overflow: ellipsis;.overflow-string/* Not supported in most browsers,
     see the 'Browser compatibility' section below */text-overflow:" [..]";

HTML

<pclass="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><pclass="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><pclass="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><pclass="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.p>

Resultado

Nota: Los resultados en vivo en la siguiente tabla pueden mostrarse incorrectamente debido a una limitación del Editor MDN que elimina todo el contenido del estilo. attributes cual tiene text-overflow propiedades con string valor.

Valor CSS direction: ltr direction: rtl
Resultado Esperado Resultado en vivo Resultado Esperado Resultado en vivo
desbordamiento visible 1234567890 1234567890 0987654321 1234567890
text-overflow: clip t-o_clip.png
1234567890 t-o_clip_rtl.png 1234567890
text-overflow: '' 12345 1234567890 54321 1234567890
text-overflow: ellipsis 1234… 1234567890 … 4321 1234567890
text-overflow: '.' 1234. 1234567890 .4321 1234567890
text-overflow: clip clip 123456 1234567890 654321 1234567890
text-overflow: clip ellipsis 1234… 1234567890 6543… 1234567890
text-overflow: clip '.' 1234. 1234567890 6543. 1234567890
text-overflow: ellipsis clip … 3456 1234567890 … 4321 1234567890
text-overflow: ellipsis ellipsis … 34… 1234567890 … 43 … 1234567890
text-overflow: ellipsis '.' … 34. 1234567890 … 43. 1234567890
text-overflow: ',' clip , 3456 1234567890 , 4321 1234567890
text-overflow: ',' ellipsis , 34… 1234567890 , 43… 1234567890
text-overflow: ',' '.' , 34. 1234567890 , 43. 1234567890

Especificaciones

Especificación Estado Comentario
Módulo de desbordamiento CSS nivel 4 Añadidos los valores y fade y el fade() función
Módulo de desbordamiento de CSS, nivel 3
La definición de ‘desbordamiento de texto’ en esa especificación.		 Borrador de trabajo Definición inicial

Una versión anterior de esta interfaz alcanzó el Recomendación candidata estado. Como era necesario eliminar algunas características que no figuran en la lista en riesgo, la especificación se degradó a la Borrador de trabajo nivel, explicando por qué los navegadores implementaron esta propiedad sin prefijo, aunque no en el estado CR.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
text-overflow 1 12 7Hasta Firefox 10, manejo de text-overflow en bloques con desbordamiento en línea en ambos lados horizontales era incorrecto. Antes de Firefox 10, si solo se especificaba un valor (como text-overflow: ellipsis;), el texto se elipsó en ambos lados del bloque, en lugar de solo en el borde final según la dirección del texto del bloque. 68 119-15 1.3 ≤37 18 7Hasta Firefox 10, manejo de text-overflow en bloques con desbordamiento en línea en ambos lados horizontales era incorrecto. Antes de Firefox 10, si solo se especificaba un valor (como text-overflow: ellipsis;), el texto se elipsó en ambos lados del bloque, en lugar de solo en el borde final según la dirección del texto del bloque. 1110.1-14 1 1.0
fade_function No No No No No No No No No No No No
fade_value No No No No No No No No No No No No
string No No 9 No No No No No 9 No No No
two_value_syntax No No 9 No No No No No 9 No No No

Ver también

  • Propiedades CSS relacionadas: overflow, white-space
  • Propiedades CSS que controlan los saltos de línea en palabras: overflow-wrap, word-break