Propiedad text-overflow

La propiedad text-overflow agrega puntos suspensivos al final del texto truncado para indicar que el texto no cabía en el bloque y fue truncado.

Para que la propiedad funcione, el texto debe estar truncado mediante la propiedad overflow o la propiedad overflow-x con el valor hidden, auto o scroll. Si está establecido en visible (que es el valor por defecto) - text-overflow no funcionará.

Sintaxis

selector {
	text-overflow: ellipsis | clip;
}

Valores

Valor	Descripción
`ellipsis`	Agrega puntos suspensivos al final del texto truncado.
`clip`	No agrega puntos suspensivos al final (este es el valor por defecto, se utiliza para desactivar la propiedad cuando es necesario).

Valor por defecto: clip.

Ejemplo . Texto que se desborda

En este ejemplo, una palabra muy larga no cabrá en el contenedor y se desbordará beyond sus límites. No hay truncamiento:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

Ejemplo . Agreguemos la propiedad overflow

Ahora, todo lo que se desborde beyond los límites del contenedor, simplemente se truncará:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

Ejemplo . Valor ellipsis

Ahora, además de la propiedad overflow agregaremos también text-overflow con el valor ellipsis. Al texto truncado se le agregarán puntos suspensivos al final:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Ejemplo . Con barras de desplazamiento

Si establecemos overflow: auto y text-overflow: ellipsis, aparecerá una barra de desplazamiento, pero los puntos suspensivos aún se agregarán. Intente desplazar la barra de desplazamiento en el ejemplo:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Ejemplo . Si no hay palabras muy largas

Si no hay palabras lo suficientemente largas como para que se desborden beyond el límite del contenedor, no se producirá ningún truncamiento (nada se está desbordando). Observe el siguiente ejemplo:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Ejemplo . Texto en una sola línea

Sin embargo, hay situaciones en las que queremos que el texto se trunque si es demasiado largo (el texto en general, no palabras individuales) y no se envuelva a la siguiente línea. Esto se hace agregando la propiedad white-space con el valor nowrap, que prohibirá el ajuste de texto a otra línea. Observe el ejemplo, ahora el texto se trunca:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Ejemplo . Ancho en porcentaje

Si establecemos el ancho del bloque en %, el truncamiento también funcionará correctamente:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Véase también

las propiedades word-break y overflow-wrap,
que permiten dividir las letras de una palabra larga en una nueva línea
la propiedad hyphens,
que activa la división de palabras por sílabas
la propiedad overflow,
que trunca las partes que se desbordan beyond el límite del bloque