W3docs
pt
Entrar

Propriedade CSS text-overflow

Use a propriedade CSS text-overflow para especificar como o texto inline que transborda deve ser sinalizado. Veja valores e exemplos.

A propriedade CSS text-overflow especifica como o conteúdo que transborda o seu contêiner é sinalizado ao usuário — normalmente cortando-o ou substituindo a parte oculta por reticências (…). Ela é uma das propriedades CSS3.

Esta página aborda a sintaxe e os valores, as três condições que uma caixa deve atender para que text-overflow tenha efeito, como truncar múltiplas linhas, uma armadilha comum do Flexbox e uma lista completa de valores.

Por que três propriedades são necessárias juntas

Sozinha, text-overflow não faz nada. Ela apenas descreve como o texto que já está transbordando deve ser renderizado, portanto é preciso primeiro fazer o texto transbordar e ocultar o excesso. Para truncamento em uma linha única, as três propriedades a seguir devem estar no mesmo elemento:

  • white-space: nowrap — impede a quebra de linha do texto, forçando-o para uma única linha que ultrapassa a caixa.
  • overflow: hidden — corta a parte que escapa da caixa (sem isso, o texto ficaria visível do lado de fora).
  • text-overflow: ellipsis — instrui o navegador a marcar o texto cortado com reticências em vez de um corte brusco.

Se qualquer uma dessas propriedades estiver ausente, as reticências não aparecerão. A caixa também precisa ter uma largura restrita (ou max-width) para que haja algo a transbordar.

No CSS3, também é possível fornecer uma string personalizada no lugar das reticências. Um valor de string pode conter espaços em branco, ou qualquer outra string personalizada. Em rascunhos mais antigos da especificação era possível usar uma URL para uma imagem, mas isso foi removido.

Valor Inicialclip
Aplica-se aElementos contêiner de bloco.
HerdadoNão.
AnimávelNão.
VersãoCSS3
Sintaxe DOMobject.style.textOverflow = "ellipsis";

Sintaxe

Valores da propriedade CSS text-overflow

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

Exemplo da propriedade text-overflow:

Exemplo de código CSS text-overflow

<!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>
Experimente Você Mesmo »

Resultado

CSS text-overflow com valores clip e ellipsis

Exemplo da propriedade text-overflow com os valores "clip", "ellipsis" e "initial":

Exemplo CSS text-overflow com valores clip e ellipsis

<!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>
Experimente Você Mesmo »

Truncando múltiplas linhas

text-overflow: ellipsis funciona apenas em uma única linha. Para limitar o texto a um número fixo de linhas e adicionar reticências após a última, use a abordagem com -webkit-line-clamp. Ela é amplamente suportada pelos navegadores modernos, apesar do prefixo de fornecedor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        background-color: #eee;
        border: 1px solid #666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Clamp to two lines</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Aqui você não define white-space: nowrap, pois o texto precisa quebrar antes de ser limitado.

Armadilha: filhos de Flexbox e CSS Grid

Um item flex ou grid tem min-width padrão como auto, o que impede que ele encolha abaixo do tamanho intrínseco do conteúdo. Isso impede que overflow: hidden seja ativado, de modo que as reticências nunca aparecem mesmo com as três propriedades definidas. A solução é adicionar min-width: 0 (ou overflow: hidden) ao item que será truncado:

.flex-child {
  min-width: 0;        /* allow the item to shrink */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Valores

ValorDescriçãoExperimente
clipCorta o texto no limite da área de conteúdo; o truncamento pode ocorrer no meio de um caractere. Este é o valor padrão.Experimente »
ellipsisRenderiza reticências ("...") para indicar o texto cortado. Observação: funciona apenas em uma única linha de texto.Experimente »
&lt;string&gt;Renderiza a string fornecida para representar o texto cortado. A string é exibida dentro da área de conteúdo. Observação: suporte limitado em navegadores mais antigos.Experimente »
initialFaz a propriedade usar seu valor padrão.Experimente »
inheritHerda a propriedade do seu elemento pai.

Prática

Prática
A propriedade text-overflow funciona quando
A propriedade text-overflow funciona quando
Was this page helpful?