CSS text-overflow: reticências, line clamp e quebra de palavras
Laboratório de overflow e truncamento de texto em CSS
CSS text-overflow: reticências, line clamp, word-break | We.Inc
Redimensione uma caixa com uma URL longa e uma palavra composta alemã e teste overflow, text-overflow: ellipsis, line clamp, word-break, overflow-wrap e hyphens ao vivo, com classes Tailwind.
Conteúdo longo escapa da caixa quando ela é pequena demais. O overflow decide o que acontece com o excesso: visible, hidden, clip, scroll ou auto. Para uma linha que termina em reticências, combine white-space: nowrap, overflow: hidden e text-overflow: ellipsis. Para várias linhas, use -webkit-line-clamp. Para dividir palavras que não quebram, use overflow-wrap: anywhere.
Arraste o controle de largura e a caixa de exemplo encolhe em volta de um endereço web real, da palavra Donaudampfschifffahrtsgesellschaft e de uma frase normal. Cada opção de overflow, quebra e clamp é um botão, o resultado é instantâneo e o CSS necessário aparece escrito logo abaixo.
Escolha qual texto de exemplo carregar: uma URL, uma palavra composta longa ou um parágrafo.
Arraste o controle de largura até o texto não caber mais.
Teste os valores de overflow, as reticências, o line clamp e as opções de quebra de palavras, um de cada vez.
Copie o CSS que corresponde ao resultado de que você gostou.
As reticências precisam das três coisas: nowrap, um overflow diferente de visible e um limite de largura. Se faltar qualquer uma delas, os pontinhos não aparecem.
Dentro de uma linha flex, um filho truncado também precisa de min-width: 0, porque por padrão os itens flex se recusam a encolher abaixo do próprio conteúdo.
Coloque o texto completo em um atributo title ou mostre-o no foco, já que o truncamento esconde palavras de quem não consegue passar o mouse por cima.
hyphens: auto só hifeniza quando o elemento ou um pai tem um atributo lang para o qual o navegador tem dicionário.
Perguntas frequentes
Por que o text-overflow: ellipsis não funciona?
Normalmente falta um dos parceiros dele. O elemento precisa ser de bloco ou inline-block com largura limitada, ter overflow definido como hidden ou clip e manter o texto em uma linha com white-space: nowrap. Em um item flex ou grid, adicione também min-width: 0 para que o item possa encolher.
O line-clamp funciona sem o prefixo -webkit-?
A forma com prefixo, -webkit-line-clamp junto com display: -webkit-box e -webkit-box-orient: vertical, funciona em todos os principais navegadores atuais e é o que o Tailwind gera. A propriedade line-clamp sem prefixo, do CSS Overflow Level 4, ainda está chegando aos navegadores, então confira o caniuse antes de depender só dela.
Qual a diferença entre word-break e overflow-wrap?
O overflow-wrap só quebra uma palavra quando ela transbordaria, então as palavras normais quebram normalmente. O word-break: break-all deixa o navegador quebrar entre quaisquer duas letras em qualquer lugar, o que gera um texto irregular e difícil de ler. O word-break: keep-all serve para texto em chinês, japonês e coreano, quando você não quer quebras dentro das palavras.
O que o overflow: clip faz que o hidden não faz?
Os dois cortam o excesso. O hidden ainda cria um contêiner de rolagem, então um script pode rolá-lo e ele afeta o position: sticky dentro dele. O clip proíbe qualquer rolagem, e com overflow-clip-margin você pode deixar o conteúdo passar alguns pixels da borda antes de cortar.
Como truncar texto dentro de uma célula de tabela?
Defina table-layout: fixed na tabela e uma largura nas colunas, e depois aplique o trio de sempre, nowrap, hidden e ellipsis, à célula. Sem o layout fixo, a coluna simplesmente cresce para caber o texto. Outra opção é max-width: 0 com width: 100% na célula.
Os cinco valores de overflow
visible é o padrão e deixa o conteúdo ser pintado fora da caixa sem afetar o layout ao redor. hidden e clip cortam na borda do padding. scroll sempre mostra barras de rolagem, mesmo quando nada transborda, e auto só as mostra quando necessário, o que quase sempre é a melhor escolha.
overflow é um atalho para overflow-x e overflow-y. Definir um eixo como visible e o outro como hidden não funciona como está escrito: nessa combinação o navegador calcula visible como auto, então pode aparecer uma barra de rolagem inesperada. O clip é a exceção e pode ser combinado com visible.
Quebrar palavras que não cabem
overflow-wrap: break-word quebra palavras longas quando necessário, mas não deixa a caixa encolher abaixo da palavra mais longa, então ainda pode transbordar dentro de itens flex e tabelas. overflow-wrap: anywhere também reduz esse tamanho mínimo, e é por isso que resolve URLs longas em barras laterais estreitas.
hyphens: auto insere um hífen em uma divisão silábica correta nos idiomas que o navegador suporta, deixando texto justificado ou estreito em alemão e holandês muito mais legível. Algumas versões do Safari só entendem -webkit-hyphens, então escreva os dois. Use hyphens: manual e o hífen suave ­ quando quiser escolher você mesmo os pontos de quebra.
Truncamento e acessibilidade
O texto cortado continua na página, então os leitores de tela leem tudo, o que é bom. Quem perde são as pessoas que enxergam e usam teclado ou toque, porque não conseguem passar o mouse para ver um tooltip.
Para nomes de produtos ou mensagens importantes, ofereça uma forma de expandir o texto, como um botão Mostrar mais ou um elemento details, em vez de depender só das reticências. Deixe o line clamp para pré-visualizações em que o texto completo está a um clique de distância.
Valores de overflow comparados
O que cada valor de overflow faz
Valor
Conteúdo excedente
Barras de rolagem
Contêiner de rolagem?
Tailwind
É pintado fora da caixa
Nunca
Não
Cortado na borda do padding
Nunca
Sim (rolável por script)
Cortado
Nunca
Não
Rola
Sempre visíveis
Sim
Rola
Só quando necessário
Sim
Reticências em uma linha
A receita de reticências em três linhas
Remova qualquer uma das três declarações e os pontinhos somem. O atributo title mantém o texto completo disponível.
Reticências dentro de uma linha flex
O item do meio recebe min-width: 0 para poder encolher abaixo da largura do texto. Sem isso, é a linha que transborda.
Clamp em várias linhas
Limitar a descrição de um card a três linhas
O padrão com prefixo abaixo é o que tem amplo suporte. A declaração line-clamp sem prefixo é adicionada para os navegadores que já a entendem.
word-break vs overflow-wrap vs hyphens
Quebrar palavras longas
Declaração
Quebra onde
Ideal para
Tailwind
overflow-wrap: break-word
Dentro de uma palavra só se ela fosse transbordar
Texto corrido com alguma palavra longa de vez em quando
overflow-wrap: anywhere
Igual, e permite que a caixa encolha
URLs em itens flex e colunas estreitas
wrap-anywhere (v4.1)
word-break: break-all
Entre quaisquer letras, sempre
Código, hashes, IDs
word-break: keep-all
Nunca dentro de palavras CJK
Chinês, japonês, coreano
hyphens: auto
Nas sílabas, com hífen
Texto estreito ou justificado com lang definido
A mesma URL com quatro configurações de quebra
Cada caixa tem 160px de largura. Só a última é deixada transbordar.
Truncar células de tabela
Layout de tabela fixo com células com reticências
table-layout: fixed faz as larguras das colunas prevalecerem sobre o conteúdo, para que as reticências possam entrar em ação.
URL longa
Palavra composta alemã
Parágrafo
Grãos de café frescos são torrados toda terça-feira e enviados na mesma tarde, então chegam à maioria dos endereços em até três dias após a torra, enquanto o sabor ainda está no auge.
Reticências sozinhas precisam de white-space: nowrap (ou de um line clamp).
As reticências precisam de overflow definido como hidden ou clip.
Um line clamp precisa de overflow: hidden para cortar o resto.