Propriedade text-overflow
Última atualização: 2026-09-13
text-overflow Propriedade text-overflow
A propriedade text-overflow do CSS controla como o texto é exibido quando transborda o contêiner. Seu uso mais comum, combinado com overflow: hidden e white-space: nowrap, é renderizar texto de linha única transbordante com uma elipse. Ela suporta dois modos: clip (cortar) e ellipsis (…), sendo uma ferramenta padrão para lidar com textos longos em design de UI.
| Categoria | |
|---|---|
| Valor Inicial | clip |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
text-overflow: [ clip | ellipsis | <string> ]{1,2};⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
clip | ellipsis | Palavra-chave | Tratamento de transbordamento: clip ou ellipsis |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-overflow | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v10 |
| Suportado em todos os principais navegadores | |||||
Importante： O text-overflow só funciona junto com overflow: hidden (ou scroll/auto) e white-space: nowrap; definido sozinho não tem efeito.
Dica： A elipse de várias linhas requer -webkit-line-clamp junto com display: -webkit-box e -webkit-box-orient: vertical, que são propriedades específicas do WebKit.
❓ Perguntas Frequentes
QPor que a minha propriedade text-overflow não mostra a elipse no CSS?
AVerifique se overflow: hidden e white-space: nowrap estão ambos definidos e se o contêiner tem um limite de largura definido. A falta de qualquer uma dessas condições impede que a elipse de transbordamento seja acionada.
QComo adiciono uma elipse a um texto truncado de várias linhas usando CSS?
AO CSS padrão suporta apenas elipse de linha única. Para várias linhas, use -webkit-line-clamp para limitar a quantidade de linhas junto com display: -webkit-box e overflow: hidden; todos os navegadores principais já oferecem suporte.
QComo escrevo uma elipse de texto de linha única com a propriedade text-overflow?
ATrês propriedades devem trabalhar juntas: white-space: nowrap para proibir a quebra, overflow: hidden para ocultar o transbordamento e text-overflow: ellipsis para mostrar a elipse. O contêiner também precisa ter uma largura fixa ou restrita — as três condições são necessárias.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade white-space
Controla o tratamento de espaços em branco e a quebra de linha.
Propriedade overflow
Controla como o conteúdo transbordante é tratado.
