Propiedad CSS text-overflow

La propiedad CSS text-overflow especifica cómo se debe indicar al usuario el texto en línea que se desborda. Es una de las propiedades CSS3.

La propiedad text-overflow se usa comúnmente junto con la propiedad overflow establecida en hidden y white-space establecida en nowrap, pero puede funcionar con otros valores dependiendo del contexto de diseño.

En CSS3, la especificación permite usar una cadena personalizada. Un valor de cadena puede contener espacios en blanco, o puedes usar cualquier otra cadena personalizada. En versiones anteriores de la especificación, se indicaba que se podía usar una URL a una imagen para los puntos suspensivos, pero esto fue eliminado.

Valor inicial	clip
Se aplica a	Elementos contenedores de bloque.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.textOverflow = "ellipsis";

Sintaxis

Valores de CSS text-overflow

css

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

Ejemplo de la propiedad text-overflow:

Ejemplo de código CSS text-overflow

html

<!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>

Try it Yourself »

Resultado

CSS text-overflow with clip, ellipsis values

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

Ejemplo de valores clip y ellipsis en CSS text-overflow

html

<!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>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
`clip`	Recorta el texto en el límite del área de contenido; el truncamiento puede ocurrir en medio de un carácter. Este es el valor predeterminado.	Probarlo »
`ellipsis`	Muestra un signo de puntos suspensivos ("...") para indicar el texto recortado. Nota: Esto solo funciona en una sola línea de texto.	Probarlo »
`<string>`	Muestra la cadena proporcionada para representar el texto recortado. La cadena se muestra dentro del área de contenido. Nota: Soporte limitado en navegadores antiguos.	Probarlo »
`initial`	Hace que la propiedad utilice su valor predeterminado.	Probarlo »
`inherit`	Hereda la propiedad de su elemento padre.

Práctica

La propiedad text-overflow funciona si

la propiedad overflow está establecida en "hidden" y white-space en "normal".la propiedad overflow está establecida en "visible" y white-space en "nowrap".la propiedad overflow está establecida en "hidden" y white-space en "nowrap".la propiedad overflow está establecida en "visible" y white-space en "normal".

Propiedad CSS text-overflow ​

Sintaxis ​

Ejemplo de la propiedad text-overflow: ​

Resultado ​

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

Valores ​