Propriedade text-overflow

A propriedade text-overflow adiciona reticências ao final do texto truncado para indicar que o texto não cabia no bloco e foi truncado.

Para a propriedade funcionar, o texto deve ser truncado através da propriedade overflow ou da propriedade overflow-x com o valor hidden, auto ou scroll. Se estiver definido como visible (que é o valor padrão) - text-overflow não funcionará.

Sintaxe

seletor {
	text-overflow: ellipsis | clip;
}

Valores

Valor	Descrição
`ellipsis`	Adiciona reticências ao final do texto truncado.
`clip`	Não adiciona reticências ao final (este é o valor padrão, útil para desativar a ação da propriedade quando necessário).

Valor padrão: clip.

Exemplo . Texto transbordante

Neste exemplo, uma palavra muito longa não caberá no contêiner e transbordará beyond de suas bordas. Não há truncamento:

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

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

Exemplo . Vamos adicionar a propriedade overflow

Agora, tudo que transbordar beyond das bordas do contêiner será simplesmente truncado:

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

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

Exemplo . Valor ellipsis

Agora, além da propriedade overflow vamos adicionar também text-overflow com o valor ellipsis. Serão adicionadas reticências ao final do texto truncado:

<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;
}

Exemplo . Com barras de rolagem

Se você definir overflow: auto e text-overflow: ellipsis, uma barra de rolagem aparecerá, mas as reticências ainda serão adicionadas. Tente rolar a barra de rolagem no exemplo:

<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;
}

Exemplo . Quando não há palavras muito longas

Se não houver palavras longas o suficiente para transbordarem do contêiner, o truncamento não ocorrerá (nada está transbordando). Veja o próximo exemplo:

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

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

Exemplo . Texto em uma única linha

No entanto, há situações em que queremos que o texto seja truncado se for muito longo (o texto como um todo, e não palavras individuais) e não seja quebrado para a próxima linha. Isso é feito adicionando a propriedade white-space com o valor nowrap, que proíbe a quebra de texto para outra linha. Veja o exemplo, agora o texto é truncado:

<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;
}

Exemplo . Largura em porcentagem

Se você definir a largura do bloco em %, o truncamento também funcionará corretamente:

<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;
}

Veja também

as propriedades word-break e overflow-wrap,
que permitem quebrar as letras de uma palavra longa para uma nova linha
a propriedade hyphens,
que ativa a quebra de palavras por sílabas
a propriedade overflow,
que trunca as partes que transbordam beyond da borda do bloco