Para que novas linhas simples no texto-fonte sejam exibidas como espaços e linhas em branco iniciem parágrafos, crie a estrutura dos parágrafos antes de aplicar a quebra normal de texto. No Mac, você pode testar isso em uma página local no navegador; só o CSS não faz essa distinção.

Este guia é para quem está preparando prosa em inglês para uma página web simples ou uma pré-visualização de Markdown. A tarefa é preservar linhas legíveis no texto-fonte e, ao mesmo tempo, produzir parágrafos contínuos que se reorganizem quando a largura da janela do navegador mudar.

Por que uma configuração de espaço em branco do CSS não atende aos dois requisitos

Considere este texto-fonte sintético. Cada parágrafo ocupa duas linhas no texto-fonte, e uma linha vazia separa os parágrafos:

Panel A introduces the layout
and describes the first section.

Panel B introduces another section
and describes the remaining space.

O resultado desejado são dois parágrafos. Dentro de cada parágrafo, a nova linha do texto-fonte se transforma em um espaço. O navegador escolhe então as quebras de linha visíveis de acordo com a largura disponível.

Com white-space: normal, as novas linhas do texto-fonte são reduzidas, junto com outros espaços em branco que podem ser reduzidos. Isso inclui novas linhas consecutivas: uma linha vazia no texto-fonte não cria um parágrafo. Com white-space: pre-line, os caracteres de nova linha continuam sendo quebras de linha, inclusive as novas linhas simples que você queria unir. A MDN documenta esses comportamentos na referência da propriedade white-space.

Configuração aplicada a um único bloco de texto Nova linha simples no texto-fonte Linha vazia no texto-fonte Adequada para esta tarefa?
white-space: normal É reduzida junto com os espaços em branco Também é reduzida Somente após a criação dos parágrafos
white-space: pre-line Preserva uma quebra de linha Preserva as quebras Não
white-space: pre-wrap Preserva uma quebra de linha Preserva as quebras Não
Elementos de parágrafo separados com white-space: normal Flui dentro de cada parágrafo Representada por um limite entre parágrafos Sim

O W3C descreve o processamento de espaços em branco como uma operação de renderização que deixa inalterados os dados subjacentes do documento. Suas regras para quebras de segmento também dependem do texto ao redor; substituir uma nova linha por um espaço é adequado para a prosa em inglês usada aqui, mas não é uma transformação universal para todo tipo de texto. Consulte CSS Text Module Level 3.

A solução prática, portanto, tem duas etapas: reconhecer os parágrafos no texto-fonte e, em seguida, deixar o navegador dispor o texto. O padrão HTML do WHATWG define o elemento p como representação de um parágrafo. Seu espaçamento visível pode ser controlado separadamente por meio de estilos. Consulte o elemento p.

Escolha o caminho adequado para o seu texto-fonte

Use o guia de decisão a seguir antes de alterar qualquer coisa. Ele separa a interpretação do texto-fonte da aparência, o que ajuda a evitar corrigir a camada errada.

O que você tem O que fazer
Texto simples que contém apenas prosa Divida nas linhas vazias, una as novas linhas simples dentro de cada parágrafo e crie elementos de parágrafo
Markdown com títulos, listas ou blocos de código Use um analisador de Markdown e confira como ele trata quebras suaves
HTML existente com elementos de parágrafo separados Confira os estilos de espaço em branco e espaçamento dos parágrafos
Uma página que contém elementos explícitos de quebra de linha Corrija o texto-fonte ou a configuração de renderização se essas quebras não forem intencionais
Uma página que você só pode visualizar Use um fluxo de trabalho disponível para acessar o texto-fonte ou exportá-lo; os exemplos aqui exigem controle do documento

Não substitua cada nova linha por um espaço antes de identificar os parágrafos: isso remove os separadores necessários para distingui-los. Da mesma forma, não use elementos br repetidos no lugar da estrutura de parágrafos. O WHATWG define br como uma quebra de linha e diz que ele não deve ser usado para separar grupos temáticos dentro de um parágrafo. Consulte o elemento br.

Crie um exemplo local funcional com o TextEdit

A página completa a seguir requer o TextEdit e um navegador com JavaScript ativado. Ela inclui um campo de texto-fonte editável e uma pré-visualização separada. Não usa bibliotecas externas.

  1. Abra o TextEdit e escolha File > New e, em seguida, Format > Make Plain Text.
  2. Cole o exemplo completo abaixo.
  3. Escolha File > Save e dê ao arquivo o nome paragraph-demo.html.
  4. Se for solicitado a escolher a extensão, selecione Use .html.
  5. Abra o arquivo salvo no Safari ou em outro navegador para desktop.

A Apple documenta as etapas para criar texto simples e escolher a extensão em Trabalhar com documentos HTML no TextEdit do Mac. Ao reabrir o arquivo para editá-lo, use a configuração Display HTML files as HTML code instead of formatted text em TextEdit > Settings > Open and Save.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph flow demo</title>
  <style>
    body {
      max-width: 46rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font: 1rem/1.6 system-ui, sans-serif;
    }
    label { display: block; }
    textarea {
      box-sizing: border-box;
      width: 100%;
      min-height: 12rem;
      font: 1rem/1.5 monospace;
    }
    #preview p {
      white-space: normal;
      margin: 0;
    }
    #preview p + p { margin-top: 1em; }
  </style>
</head>
<body>
  <h1>Paragraph flow demo</h1>
  <label for="source">Source text</label>
  <textarea id="source">Panel A introduces the layout
and describes the first section.

Panel B introduces another section
and describes the remaining space.</textarea>
  <h2>Preview</h2>
  <div id="preview"></div>
  <script>
    function toParagraphs(source) {
      return source.replace(/\r\n?/g, '\n')
        .split(/\n[ \t]*\n(?:[ \t]*\n)*/)
        .map(block => block
          .replace(/^[ \t\n]+|[ \t\n]+$/g, '')
          .replace(/[ \t]*\n[ \t]*/g, ' '))
        .filter(text => text.length > 0);
    }

    const source = document.getElementById('source');
    const preview = document.getElementById('preview');

    function render() {
      const paragraphs = toParagraphs(source.value).map(text => {
        const paragraph = document.createElement('p');
        paragraph.textContent = text;
        return paragraph;
      });
      preview.replaceChildren(...paragraphs);
    }

    source.addEventListener('input', render);
    render();
  </script>
</body>
</html>

O conversor primeiro normaliza os finais de linha CRLF e de retorno de carro para LF. Em seguida, divide o texto em cada linha vazia ou que contenha apenas espaços e tabulações comuns. Em cada bloco resultante, substitui as novas linhas restantes, junto com os espaços ou tabulações adjacentes, por um único espaço comum.

Estas são regras explícitas para este exemplo, não um analisador geral de documentos. Várias linhas vazias geram um único limite entre parágrafos. Os espaços em branco comuns iniciais e finais são removidos. Uma entrada vazia não gera parágrafos. O texto-fonte original continua visível no campo de entrada para que você possa compará-lo com a transformação.

Cada parágrafo de saída recebe seu texto por meio de textContent. A MDN documenta que atribuir um valor a essa propriedade substitui os filhos de um nó por um nó de texto. Aqui, ela é atribuída apenas a parágrafos recém-criados e vazios. Consulte Node: propriedade textContent.

A função de conversão passou em seis verificações determinísticas no Node.js: entrada de parágrafo comum, entrada CRLF, entrada com retorno de carro, entrada composta apenas por linhas vazias, linhas vazias repetidas e preservação de um espaço inquebrável. A renderização no navegador não foi executada durante a preparação; use as verificações visuais abaixo para conferi-la no seu Mac.

Confira separadamente os limites entre parágrafos e a quebra de linha

Comece com o exemplo fornecido. A pré-visualização deve conter Panel A introduces the layout and describes the first section. como um único parágrafo, seguido pelo parágrafo correspondente do Painel B. Em uma janela estreita, cada parágrafo pode ocupar várias linhas visíveis.

Agora faça estas alterações controladas:

  1. Substitua por um espaço a nova linha após layout. A estrutura dos parágrafos na pré-visualização deve permanecer igual.
  2. Restaure essa nova linha e remova a linha vazia entre os dois blocos. A pré-visualização deve passar a mostrar um único parágrafo.
  3. Adicione entre os blocos uma linha vazia que contenha apenas espaços ou tabulações. A pré-visualização deve voltar a mostrar dois parágrafos.
  4. Adicione várias linhas vazias nesse ponto. O espaço entre os parágrafos deve continuar sendo único.
  5. Redimensione a janela do navegador. O limite entre os parágrafos deve permanecer fixo, enquanto as linhas dentro de cada parágrafo se reorganizam.

Essa sequência distingue os limites no texto-fonte das quebras feitas pelo navegador. No exemplo, o espaçamento entre parágrafos vem da regra de margem entre parágrafos adjacentes. Alterar essa margem muda o espaço visível sem mudar a forma como o texto-fonte é analisado.

Se você usar white-space: normal sem este conversor, a união visual não significa que a nova linha tenha sido excluída do texto-fonte. A MDN explica que o espaço em branco do conteúdo de texto comum continua no DOM mesmo quando o CSS o reduz durante a renderização. Consulte Tratamento de espaços em branco.

Use a análise de Markdown para documentos Markdown

O Markdown já oferece a convenção de parágrafo necessária aqui. CommonMark define um parágrafo como linhas consecutivas não vazias que não formam outro tipo de bloco; linhas vazias separam parágrafos. Uma nova linha normal dentro de um parágrafo é uma quebra suave, que um renderizador pode converter em uma nova linha ou em um espaço. Consulte parágrafos do CommonMark e quebras de linha suaves.

Cole o exemplo sintético na visualização do texto-fonte do editor de Markdown e confira a pré-visualização. Se cada nova linha simples produzir uma quebra visível, consulte as opções de renderização documentadas pelo editor. Não presuma que todos os aplicativos de Markdown ofereçam a mesma configuração.

Em um projeto que use a biblioteca chamada markdown-it, a opção documentada breaks tem como padrão false. Defini-la como true converte as novas linhas dos parágrafos em elementos br. Mantê-la como false permite obter parágrafos contínuos, desde que o CSS de saída também reduza os espaços em branco. Consulte MarkdownItOptions.

As quebras explícitas de Markdown ainda precisam de atenção. Segundo o CommonMark, dois ou mais espaços finais ou uma barra invertida no fim da linha podem criar uma quebra de linha rígida. Remova esses marcadores somente quando forem indesejados. As regras estão documentadas em quebras de linha rígidas.

Não execute o conversor de texto simples em um documento Markdown inteiro. Ele não reconhece títulos, listas, blocos de código cercados por crases nem regras de indentação. Deixe que um analisador de Markdown preserve essas estruturas; aplique os estilos de espaço em branco aos parágrafos de prosa resultantes.

Preserve os limites do navegador e da composição tipográfica

Sempre que possível, mantenha cada parágrafo de prosa como texto contínuo. O exemplo cria um nó de texto por parágrafo e deixa a quebra de linha e a disposição dos glifos a cargo do navegador. Ele não mede palavras nem insere um elemento separado ao redor de cada caractere.

Esse limite importa para a tipografia. O W3C especifica circunstâncias em que a composição deve continuar através dos limites entre elementos em linha e outras em que deve parar, inclusive diante de certas alterações de espaçamento e alinhamento. Evite adicionar caixas em linha desnecessárias apenas para controlar a posição das linhas. Consulte Composição através dos limites entre elementos.

Use o conversor somente quando cada nova linha isolada representar uma quebra de linha editorial. Se uma nova linha separar rótulos intencionalmente ou ocorrer dentro de uma palavra, uni-la com um espaço altera o conteúdo. O exemplo também trata uma linha que contém um espaço inquebrável como conteúdo, e não como um separador vazio; a MDN distingue espaços inquebráveis dos espaços em branco comuns e redutíveis do documento em Tratamento de espaços em branco.

Para prosa em inglês, primeiro estabeleça os limites entre parágrafos e deixe o navegador fazer as quebras de linha normais dentro deles. O exemplo local permite inspecionar essa regra: o texto-fonte mantém as linhas editáveis, a pré-visualização contém parágrafos reais e redimensionar a janela altera apenas a quebra de linha visível.

Fontes