W3docs
es
Iniciar sesión

Propiedad CSS text-overflow

Usa la propiedad CSS text-overflow para indicar cómo se señala el texto desbordado. Consulta valores y prueba ejemplos prácticos.

La propiedad CSS text-overflow especifica cómo se indica al usuario el contenido que desborda su contenedor — normalmente recortándolo o reemplazando la parte oculta con puntos suspensivos (…). Es una de las propiedades de CSS3.

Esta página cubre la sintaxis y los valores, las tres condiciones que debe cumplir un elemento para que text-overflow surta efecto, cómo truncar múltiples líneas, un problema común con Flexbox y una lista completa de valores.

Por qué se necesitan tres propiedades juntas

Por sí sola, text-overflow no hace nada. Solo describe cómo debe renderizarse el texto que ya está desbordando, por lo que primero hay que hacer que el texto desborde y ocultar el exceso. Para truncar en una sola línea necesitas las tres siguientes en el mismo elemento:

  • white-space: nowrap — evita que el texto se divida en varias líneas, forzándolo a una sola que sobrepasa el contenedor.
  • overflow: hidden — recorta la parte que escapa del contenedor (sin esto, el texto simplemente sería visible fuera de él).
  • text-overflow: ellipsis — le indica al navegador que marque el texto recortado con puntos suspensivos en lugar de un corte brusco.

Si falta cualquiera de ellas, los puntos suspensivos no aparecerán. El elemento también necesita un ancho restringido (o max-width) para que haya algo que desbordar.

En CSS3 también puedes indicar una cadena personalizada en lugar de los puntos suspensivos. El valor de tipo string puede contener espacios en blanco o cualquier otra cadena personalizada. En versiones anteriores del borrador de la especificación se podía usar una URL que apuntara a una imagen, pero esa opción fue eliminada.

Valor inicialclip
Se aplica aElementos contenedores de bloque.
HeredableNo.
AnimableNo.
VersiónCSS3
Sintaxis DOMobject.style.textOverflow = "ellipsis";

Sintaxis

Valores de CSS text-overflow

text-overflow: clip | ellipsis | string | initial | inherit;

Ejemplo de la propiedad text-overflow:

Ejemplo de código CSS text-overflow

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Text-overflow property example</h2>
    <h3>text-overflow: ellipsis</h3>
    <div>Lorem Ipsum</div>
  </body>
</html>
Pruébalo tú mismo »

Resultado

CSS text-overflow con los valores clip y ellipsis

Ejemplo de la propiedad text-overflow con los valores "clip", "ellipsis" e "initial":

Ejemplo CSS text-overflow con los valores clip y ellipsis

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.element1 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: clip;
        border: 1px solid #666;
      }
      div.element2 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #666;
      }
      div.element3 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: initial;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Text-overflow property example</h2>
    <h3>text-overflow: clip</h3>
    <div class="element1">Lorem Ipsum</div>
    <h3>text-overflow: ellipsis</h3>
    <div class="element2">Lorem Ipsum</div>
    <h3>text-overflow: initial</h3>
    <div class="element3">Lorem Ipsum</div>
  </body>
</html>
Pruébalo tú mismo »

Truncar múltiples líneas

text-overflow: ellipsis solo funciona en una única línea. Para limitar el texto a un número fijo de líneas y añadir puntos suspensivos tras la última, usa el enfoque -webkit-line-clamp. Está ampliamente soportado en los navegadores modernos a pesar del prefijo de proveedor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        background-color: #eee;
        border: 1px solid #666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Clamp to two lines</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Aquí no debes establecer white-space: nowrap, ya que el texto necesita dividirse en líneas antes de ser recortado.

Problema común: elementos hijo de Flexbox y CSS Grid

Un elemento hijo de Flexbox o CSS Grid tiene un valor min-width predeterminado de auto, que impide que se reduzca por debajo del tamaño intrínseco del contenido. Esto evita que overflow: hidden funcione, por lo que los puntos suspensivos nunca aparecen aunque las tres propiedades estén definidas. La solución es añadir min-width: 0 (o overflow: hidden) al elemento que debe truncarse:

.flex-child {
  min-width: 0;        /* allow the item to shrink */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Valores

ValorDescripciónPruébalo
clipCorta el texto en el límite del área de contenido; el truncamiento puede ocurrir en medio de un carácter. Es el valor predeterminado.Pruébalo »
ellipsisMuestra puntos suspensivos ("...") para indicar el texto recortado. Nota: solo funciona en una única línea de texto.Pruébalo »
&lt;string&gt;Muestra la cadena indicada para representar el texto recortado. La cadena se muestra dentro del área de contenido. Nota: soporte limitado en navegadores más antiguos.Pruébalo »
initialEstablece la propiedad en su valor predeterminado.Pruébalo »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica
La propiedad text-overflow funciona si
La propiedad text-overflow funciona si
Was this page helpful?