Curso de CSS / Overflow, quebra de texto longo e reticências

A propriedade overflow controla o conteúdo que se estende além de uma caixa, mas por si só não escolhe uma estratégia útil de quebra de texto. Combine o comportamento deliberado de overflow com regras de quebra de linha e use reticências apenas quando os leitores ainda puderem acessar a informação completa.

Compare valores de overflow com conteúdo idêntico

A aparência real da barra de rolagem e se ela está sempre visível depende das configurações de barra de rolagem sobreposta do sistema operacional e do navegador. Especificar scroll não significa que a barra permanecerá visível em todos os ambientes. hidden também pode ser rolado por script ou movimento de foco, então não significa que “o próprio conteúdo desapareceu.” clip, que impede completamente a rolagem, é um valor separado e não deve ser considerado igual a hidden. O funcionamento detalhado está explicado na descrição de overflow do MDN. Antes de ocultar o conteúdo, reveja os limites de tamanho em Largura, altura, limites min/max e box-sizing.

Se o texto geral for tratado como altura fixa e oculto, a informação pode desaparecer ao adicionar frases, traduzir ou aumentar os caracteres. Primeiro considere deixar a altura de acordo com o conteúdo e use auto se forem necessárias restrições de tamanho, como em um painel separado. O exemplo completo coloca quatro parágrafos idênticos na mesma caixa de 96px e compara apenas os valores. Depois da parte visível, deixamos um espaço extra para prática, de modo que o texto que transborda não obscureça a explicação seguinte.

Quebre URLs longas e identificadores

.url { overflow-wrap: anywhere; }

URLs sem espaços, códigos de identificação ou palavras longas podem empurrar a caixa para fora porque não há lugares suficientes para quebras de linha. overflow-wrap: anywhere oferece a oportunidade de uma quebra de linha no meio da string, se necessário. Isso não exclui o caractere em si nem insere um caractere de quebra de linha no valor da string. Apenas a exibição muda, então você pode manter a string original.

Aplicar word-break: break-all em todos os lugares pode quebrar palavras comuns desnecessariamente. Comece permitindo quebras em regiões de valores longos. Flexbox e Grid também podem impor tamanhos mínimos automáticos, portanto, examine separadamente o item relevante min-width. Quebrar o texto e permitir que sua caixa encolha resolvem diferentes partes do problema. Para mais detalhes, consulte MDN: overflow-wrap, Alinhamento do Flexbox, Quebra de linha, gap, crescimento e encolhimento.

Atenda às condições para reticências em linha única

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

O próprio text-overflow não determina o tamanho da caixa ou as quebras de linha. A abreviação em várias linhas também é um método separado deste exemplo de linha única. O exemplo completo aparece no parágrafo abaixo com o título completo, para que você possa reler o texto truncado. Não oculte conteúdo que requer o texto original, como instruções importantes ou mensagens de erro, sem uma forma de verificá-lo em outro lugar. Recomendamos que você não use a dica de ferramenta do atributo title como sua única fonte de texto. Consulte a descrição de text-overflow na MDN.

Torne os painéis roláveis acessíveis pelo teclado

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

Dependendo do navegador, a área de rolagem pode ou não receber foco do teclado automaticamente. Ao especificar tabindex="0" para o painel ao qual você precisa de acesso, você pode navegar até ele na ordem normal de tabulação. role="region" e um nome descritivo ajudam usuários de tecnologias assistivas a entender em qual região eles estão. Você não precisa necessariamente tornar cada caixa o alvo de foco ou área.

O exemplo fornece acesso pelo teclado, um nome e um contorno de foco apenas para os painéis auto e scroll que realmente requerem rolagem. Após entrar com Tab, verifique se você consegue mover-se para o último parágrafo usando as teclas de seta ou Page Down. Em telas estreitas, também assegure-se de que haja uma distinção entre rolagem dentro do painel e rolagem da página.

Execute o exemplo completo de overflow

Salve e abra o código abaixo como UTF-8 em overflow.html. Inclui todos os quatro painéis do mesmo conteúdo, URLs longas e títulos encurtados para preservar o texto original. O endereço example.com é uma string que respeita quebras de linha e não é um link de recurso real.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. Compare os últimos parágrafos dos quatro painéis. Com visible, o texto aparece fora da borda; com hidden, é recortado; com auto e scroll, deve ser possível rolar o painel e ler o último parágrafo.
2. Deixe apenas um parágrafo no painel auto. Quando o conteúdo ficar curto o suficiente, verifique se o espaço de rolagem desaparece e restaure-o para quatro parágrafos. Não julgue se está transbordando apenas olhando a barra.
3. Mova-se para o painel auto com Tab e verifique o conteúdo abaixo usando as teclas de seta. Certifique-se de que o contorno de foco está visível, então use Shift+Tab para conferir a navegação no sentido inverso.
4. Desative as declarações de overflow-wrap em URLs e estreite a janela. Observe se a string longa transborda na horizontal e depois restaure o valor anywhere.
5. Altere apenas o text-overflow do título para clip e compare os resultados de ser cortado sem a reticência. Em seguida, altere nowrap para normal para verificar o resultado da quebra de linha e retorne ao valor original.

Se toda a página for empurrada horizontalmente, verifique a largura mínima/padding do elemento mais largo e de seu pai. Se o conteúdo a ser lido desaparecer, verifique primeiro a altura fixa e overflow: hidden. Antes de adicionar rolagem ou reticências, é necessário determinar como preservar o texto original e se ele pode ser manipulado.