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

cssseletor {
  text-overflow: ellipsis | clip;
}

Valores

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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Veja também