Para aplicar um recuo deslocado a entradas com quebra automática separadas por tags <br>, aplique text-indent: 2em hanging each-line ao contêiner de bloco delas. Verifique o suporte a ambas as palavras-chave; quando navegadores antigos forem relevantes, coloque cada entrada em seu próprio bloco e use preenchimento com um recuo negativo.

Este guia é para quem está editando uma pequena página HTML em um Mac e quer que cada entrada comece alinhada à margem esquerda, enquanto as linhas de continuação fiquem mais para dentro. Os exemplos usam texto fictício e exigem apenas um editor de texto simples ou de código e um navegador.

Por que um recuo deslocado comum não funciona após uma tag de quebra

Há dois tipos diferentes de término de linha a considerar. Um <br> cria uma quebra de linha explícita. Uma quebra automática ocorre quando o navegador ajusta o texto à largura disponível. O layout desejado considera a primeira como o início de outra entrada e a segunda como uma continuação. O WHATWG define <br> como uma quebra de linha; ele não cria um novo parágrafo nem um contêiner de entrada. Padrão HTML: o elemento br.

Um text-indent negativo simples afeta a primeira linha formatada de um bloco. Portanto, adicionar preenchimento pode criar um recuo deslocado para esse bloco, mas não reinicia o avanço para fora após cada <br>. As entradas seguintes continuam pertencendo ao mesmo bloco. MDN: text-indent.

A especificação CSS define a combinação necessária aqui: each-line inclui a primeira linha e as linhas imediatamente após quebras forçadas; hanging inverte essa seleção. Juntas, elas recuam as linhas de continuação geradas por quebra automática, mantendo alinhada à margem cada linha iniciada explicitamente. W3C: recuo da primeira linha.

O resultado desejado é assim. As quebras de linha abaixo são ilustrativas; o navegador escolherá os pontos reais de quebra com base na largura disponível e nas métricas da fonte.

A entrada A começa na margem externa e continua
    para dentro quando a largura disponível acaba.
A entrada B também começa na margem externa e tem
    sua própria continuação recuada.
A entrada C é curta.

Escolha um método antes de alterar a página

Use a marcação existente e os requisitos dos navegadores para escolher sua abordagem. Esta tabela de decisão decorre do comportamento de recuo documentado e dos dados de suporte dos navegadores; ela é um auxílio de implementação, não um recurso separado do navegador.

Sua situação Abordagem recomendada
As quebras de linha explícitas fazem parte de uma passagem de texto e os navegadores com suporte são suficientes Mantenha as quebras e use hanging each-line
As entradas são parágrafos ou itens de lista separados Dê a cada entrada a marcação estrutural adequada
Navegadores antigos precisam exibir o recuo deslocado Use um bloco por entrada com preenchimento e recuo negativo
Você só pode editar o CSS e um navegador antigo não tem suporte às palavras-chave Mantenha um layout legível alinhado à margem ou solicite uma alteração na marcação

Não deduza o suporte às palavras-chave com base no suporte a text-indent básico. Os dados de compatibilidade atuais do MDN listam hanging e each-line a partir do Safari 15, Firefox 121 e Chrome 146. Instalações mais antigas podem oferecer suporte ao recuo comum, mas rejeitar essa combinação. Dados de compatibilidade de navegadores do MDN: text-indent.

Verifique também se as quebras expressam a estrutura correta. O WHATWG reserva <br> para quebras que pertencem ao conteúdo e diz que ele não deve separar grupos temáticos dentro de um parágrafo. Parágrafos separados devem ser representados por elementos de parágrafo; uma coleção de itens deve usar marcação de lista. Padrão HTML: o elemento br, Padrão HTML: agrupamento de conteúdo.

Mantenha as tags de quebra na solução CSS nativa

O documento HTML completo a seguir demonstra o método que preserva as quebras. No seu Mac, cole-o em um editor de texto simples ou de código, salve-o como hanging-indent.html e abra o arquivo em um navegador. Use um arquivo HTML, não um documento de texto formatado.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

A condição @supports verifica a declaração completa antes de aplicá-la. Navegadores sem suporte à combinação mantêm o layout alinhado à margem definido explicitamente. As consultas de recursos aplicam CSS condicionalmente, de acordo com o suporte do navegador. MDN: @supports.

Aplique o recuo a .entries, o bloco que contém o texto. A propriedade em questão se aplica a contêineres de bloco; colocar a declaração no <br> não fornece um contêiner para a entrada seguinte. MDN: text-indent.

O valor 2em é uma escolha de design ajustável. Experimente um valor menor ou maior depois de verificar o layout estreito. Ele cria um deslocamento consistente para as continuações; não mede a largura de Entry A: nem alinha automaticamente o texto à primeira palavra após um rótulo de comprimento variável.

Use blocos separados quando todos os navegadores precisarem do recuo

Se cada entrada for um parágrafo independente, altere a marcação para que cada entrada tenha sua própria primeira linha. A alternativa completa a seguir remove as quebras separadoras e aplica o cálculo tradicional de recuo deslocado separadamente a cada parágrafo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

O preenchimento desloca o início do conteúdo do parágrafo para dentro em 2em. O recuo negativo desloca apenas a primeira linha para trás pela mesma quantidade. As linhas quebradas mantêm a posição inicial recuada. Os valores precisam ser iguais: alterar apenas um muda a posição inicial da primeira linha. O recuo negativo está documentado pelo MDN, enquanto padding-inline-start fornece preenchimento na borda inicial lógica. MDN: text-indent, MDN: padding-inline-start.

Com um tamanho de fonte ilustrativo de 16 pixels, um deslocamento de 2em corresponde a 32 pixels: a continuação começa 32 pixels para dentro e o ajuste da primeira linha é −32 pixels. Este é um cálculo para o exemplo, não um resultado de renderização medido.

Remova os separadores antigos ao adotar essa estrutura. Mantenha cada entrada completa e sua formatação em linha existente dentro do novo parágrafo. Se o conteúdo for uma lista, use itens de lista; o exemplo com parágrafos é adequado especificamente para parágrafos independentes. Padrão HTML: agrupamento de conteúdo.

Verifique as quebras automáticas e o fluxo do texto antes de concluir

Teste a página em uma largura na qual as duas entradas longas quebrem em várias linhas. Depois, aumente a janela até que caibam em uma única linha. Use as verificações a seguir para distinguir um problema de recuo de um problema de quebra ou de estrutura.

  1. Verifique o início de cada entrada. No exemplo que preserva as quebras, o texto após cada <br> deve voltar à margem externa. Se isso não acontecer, verifique o suporte à combinação completa de palavras-chave.
  2. Verifique cada continuação. Entradas longas devem quebrar com recuo. Entradas curtas devem permanecer alinhadas à margem, sem espaços iniciais extras.
  3. Verifique a coluna mais estreita prevista. Reduza o recuo se ele ocupar muito da largura de linha disponível.
  4. Verifique o conteúdo real. Ao mover o conteúdo para um bloco separado, preserve as palavras de cada entrada, o destaque em linha e as quebras explícitas pretendidas.

Se nada quebrar em várias linhas, inspecione white-space. O exemplo usa normal, que agrupa os espaços em branco do código-fonte e permite quebras automáticas. pre preserva os espaços em branco, mas impede as quebras automáticas comuns; pre-wrap preserva os espaços em branco e permite quebras. O recuo não pode aparecer em uma linha de continuação que nunca se forma. MDN: white-space.

Evite adicionar espaços para simular o recuo. Com white-space: normal, sequências de espaços são agrupadas. Evite também inserir tags de quebra extras nos pontos em que o texto quebra na largura atual da janela: isso transformaria continuações escolhidas pelo navegador em inícios explícitos, alterando a forma como each-line as trata. MDN: white-space, W3C: recuo da primeira linha.

Deixe o navegador cuidar das quebras de linha e da composição dos glifos. Não divida uma entrada em elementos que envolvam caracteres para calcular as linhas visíveis. O W3C documenta condições em que limites entre elementos em linha interrompem a composição, incluindo preenchimento, bordas ou margens não nulos entre caracteres. Para esta tarefa, quebrar as entradas completas nos limites pretendidos evita introduzir esses limites adicionais dentro das palavras. W3C: composição entre limites de elementos.

Finalize com a estrutura que corresponda ao seu conteúdo: mantenha as quebras explícitas significativas com hanging each-line ou coloque as entradas independentes em seus próprios blocos. Confirme que cada entrada começa alinhada à margem e que apenas as continuações quebradas naturalmente avançam para dentro nas larguras que você pretende usar.

Fontes