Para manter o preenchimento nas duas extremidades de cada linha de um destaque quebrado, aplique box-decoration-break: clone a um elemento inline, junto com o plano de fundo e o preenchimento. Inclua a declaração com o prefixo WebKit para o Safari. O MDN explica a decoração de fragmentos.

Este guia é para quem edita uma página da web em um Mac e quer que uma frase destacada quebre naturalmente dentro de um título ou parágrafo. A tarefa é dar a cada linha resultante seu próprio plano de fundo com preenchimento, deixando a quebra de linha a cargo do navegador.

Por que o preenchimento desaparece quando o destaque quebra?

O valor inicial de box-decoration-break é slice. Quando uma caixa inline quebra entre linhas, esse valor trata sua decoração como uma caixa contínua dividida em fragmentos. O preenchimento não é inserido nas extremidades das quebras. Com clone, cada fragmento recebe seu próprio preenchimento, borda e decoração de plano de fundo. O W3C define os dois comportamentos de fragmentação.

Essa distinção explica um resultado comum: adicionar mais preenchimento horizontal deixa o início e o fim da frase inteira mais espaçosos, mas as extremidades das linhas intermediárias continuam apertadas. A configuração ausente controla o que acontece nessas quebras; aumentar apenas o preenchimento não muda esse comportamento.

Mantenha o destaque como uma caixa inline. Um plano de fundo de bloco decora o retângulo que o contém, enquanto um destaque inline acompanha o fluxo do texto. O MDN documenta os diferentes comportamentos de dimensionamento e espaçamento das caixas block, inline e inline-block. Consulte o guia do MDN sobre o modelo de caixa.

Crie um exemplo completo no seu Mac

Em um editor de código, crie um arquivo de texto simples chamado wrapped-highlight.html, cole o exemplo completo abaixo e salve-o. Abra o arquivo no navegador do computador. Não é preciso instalar pacotes nem usar uma folha de estilos externa ou JavaScript.

O título de exemplo representa uma introdução simples de página. Um span envolve toda a frase decorada. O WHATWG define o elemento span como um contêiner genérico de texto, sem significado próprio, o que o torna adequado para esse agrupamento puramente visual. Leia a definição de span no padrão HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Reduza a largura da janela do navegador até o título quebrar e depois aumente-a novamente. Inspecione o início e o fim de cada linha destacada. O resultado esperado é um fragmento de plano de fundo separado e com preenchimento ao redor de cada linha, mantendo o mesmo tratamento à medida que a quebra muda. Os exemplos do MDN usam o mesmo par de declarações, uma com prefixo e outra padrão. Consulte a sintaxe documentada e os exemplos.

As dimensões aqui são escolhas ilustrativas de design. Comece alterando o preenchimento horizontal, 0.3em, se as extremidades parecerem apertadas ou largas demais. Altere separadamente o preenchimento vertical, 0.08em. Mantenha o teste de quebra de linha ativo enquanto ajusta qualquer um dos valores.

Para comparar os comportamentos, altere temporariamente as duas declarações de decoração de clone para slice, salve e recarregue a página. Depois, restaure ambas para clone. Alterar as duas evita que a comparação dependa de qual declaração o navegador reconhece.

Quais detalhes de compatibilidade dos navegadores importam no Mac?

Mantenha as duas declarações do exemplo. Os dados atuais de compatibilidade do MDN registram suporte à propriedade padrão a partir do Chrome 130 e do Firefox 32. Para o Safari, registram suporte com o prefixo -webkit- e limitam essa implementação a elementos inline. Consulte os dados de compatibilidade de navegadores do MDN.

Essa limitação a elementos inline atende a esta tarefa: uma frase que quebra entre linhas de texto é uma fragmentação inline. Isso não estabelece suporte equivalente para um bloco fragmentado entre colunas ou páginas impressas. Ao avaliar o resultado, trate esses casos de layout separadamente.

Teste o arquivo nos navegadores para Mac que importam para sua página. Use uma janela estreita e outra larga, depois aumente o texto da página e repita. Considere variável o número de linhas; o critério de aceitação é que o preenchimento seja consistente nos fragmentos que cada navegador realmente produz.

Se um ambiente não reconhecer nenhuma das declarações, o aprimoramento de clonagem por linha não estará disponível. Mantenha o texto e o plano de fundo subjacentes utilizáveis ou escolha um tratamento de bloco com preenchimento caso um único plano de fundo retangular atenda ao requisito de design. Isso muda a aparência, portanto deve ser uma escolha explícita de design.

Como evitar planos de fundo sobrepostos e quebras estranhas?

O preenchimento e o espaçamento entre linhas resolvem problemas diferentes. Em uma caixa inline normal, o preenchimento superior e inferior pode estender a área pintada sem afastar o conteúdo ao redor. Por isso, aumentar o preenchimento vertical pode fazer com que as linhas destacadas adjacentes se sobreponham. O MDN documenta explicitamente esse comportamento de caixas inline. Consulte o preenchimento inline e o conteúdo ao redor.

Ajuste line-height do título junto com o preenchimento vertical do destaque. O exemplo usa como ponto de partida um valor 1.65 deliberadamente espaçoso. Reduza-o gradualmente se os intervalos parecerem excessivos, conferindo o layout mais estreito a cada ajuste. Não há um único valor de espaçamento adequado a todas as fontes e decorações.

Use esta sequência de diagnóstico para identificar a causa antes de alterar mais CSS:

O que você vê Verifique primeiro Próxima ação
O preenchimento aparece apenas nas extremidades da frase Comportamento da decoração Aplique as duas declarações clone ao elemento inline destacado.
Um único retângulo grande de plano de fundo Qual elemento tem o plano de fundo Coloque o plano de fundo e o preenchimento no span inline interno.
As linhas destacadas encostam verticalmente Preenchimento vertical e altura da linha do elemento pai Reduza o preenchimento vertical ou aumente a altura da linha.
Um rótulo longo ultrapassa o contêiner Oportunidades de quebra de linha disponíveis Considere a regra opcional para palavras longas abaixo.
Só no Safari falta o preenchimento esperado nas extremidades Declaração com prefixo Confirme que -webkit-box-decoration-break: clone continua na folha de estilos.

Para um rótulo de exemplo que não possa ser quebrado, como AmberTileSequenceAmberTileSequence, você pode adicionar overflow-wrap: anywhere a .sample-title. Este é um fragmento CSS opcional para adicionar à regra existente; o restante do exemplo permanece igual.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Isso permite que uma sequência que não possa ser quebrada de outra forma se divida quando necessário para evitar o transbordamento, sem inserir um hífen. A regra oferece oportunidades de quebra; ela não cria preenchimento. Frases comuns com espaços talvez não precisem dela. O MDN documenta as condições para overflow-wrap.

Considere também o próprio plano de fundo. Com clone, os planos de fundo são desenhados de modo independente para cada fragmento, então um gradiente ou uma imagem de plano de fundo pode recomeçar em cada linha. Use uma cor sólida quando quiser um destaque uniforme sem um padrão de imagem repetido. O W3C descreve planos de fundo independentes para fragmentos.

Preserve o fluxo natural do texto e os limites de formação de caracteres

Use um único elemento wrapper ao redor de toda a frase pretendida, em vez de criar wrappers separados para as linhas visíveis de hoje. Isso mantém a marcação independente da largura atual da janela e da escolha da fonte.

Evite dividir uma palavra em spans com preenchimento ao redor de cada caractere para simular o efeito. A especificação CSS Text exige que a formação de caracteres seja interrompida entre limites inline quando preenchimentos, bordas ou margens diferentes de zero no eixo inline separam unidades tipográficas de caracteres adjacentes. Portanto, um limite com preenchimento dentro de uma palavra pode afetar a formação dos glifos. Consulte as regras do W3C sobre formação de caracteres entre limites.

Para este título, coloque o wrapper nos limites da frase e mantenha contínuo o texto dentro dele. A vantagem prática é evitar a introdução de limites adicionais com preenchimento dentro da frase. Isso não garante glifos nem quebras de linha idênticos entre navegadores e fontes; inspecione a renderização que pretende usar.

E se o projeto usar Tailwind CSS?

Em um projeto Tailwind existente, adicione box-decoration-clone ao elemento inline que já tem o plano de fundo e o preenchimento do destaque. A documentação atual do Tailwind mapeia essa utilidade para box-decoration-break: clone. A utilidade box-decoration-slice seleciona o outro comportamento. Consulte as utilidades box-decoration-break do Tailwind.

Mantenha o requisito de navegador do exemplo em CSS puro: inspecione a folha de estilos gerada para verificar se há a declaração com prefixo necessária para o Safari e adicione-a ao CSS personalizado do projeto, caso esteja ausente. A utilidade seleciona o comportamento da decoração; ela não elimina os limites de implementação do navegador.

Não é preciso introduzir o Tailwind apenas para obter esse efeito. O exemplo local completo já contém o CSS necessário.

Um destaque personalizado pode usar o mesmo preenchimento?

Um intervalo da API CSS Custom Highlight estilizado por meio de ::highlight() tem recursos diferentes dos de um elemento inline estilizado. O MDN lista as propriedades permitidas, incluindo a cor do texto, a cor de plano de fundo e as decorações de texto. O preenchimento e box-decoration-break não fazem parte desse conjunto permitido. Leia os limites documentados para a estilização de destaques personalizados.

Se você controla a marcação e precisa de preenchimento real em cada linha quebrada, use um wrapper inline como o mostrado acima. Se precisar manter o destaque baseado em intervalos sem wrappers, use as propriedades de cor e decoração aceitas e considere que essa API não oferece caixas de fragmentos com preenchimento.

Para um título ou frase de página quebrada, mantenha um único wrapper inline, coloque o plano de fundo e o preenchimento juntos e aplique as duas declarações clone. Termine testando diferentes larguras e verificando o espaçamento vertical. Essas verificações mostram se o destaque funciona com o fluxo real do texto, em vez de funcionar apenas em uma largura conveniente de janela.

Fontes