Propriedade CSS hanging-punctuation

A propriedade CSS hanging-punctuation controla se um sinal de pontuação — como uma aspa de abertura ou fechamento, vírgula ou ponto final — deve pender para fora da borda inicial ou final de uma caixa de linha, em vez de ficar dentro da área de conteúdo.

A técnica vem da tipografia impressa: quando um parágrafo começa com uma aspa de abertura, deixar essa marca à esquerda da margem esquerda do texto mantém as letras opticamente alinhadas. A mesma ideia se aplica à pontuação final — um ponto ou vírgula pendente mantém a borda direita de um parágrafo justificado com aparência limpa e precisa.

O suporte a navegadores é limitado. Em 2026, hanging-punctuation é suportada apenas no Safari (motor WebKit). Chrome, Edge e Firefox a ignoram. Trate-a como uma melhoria progressiva — quando o navegador não a suporta, o texto simplesmente é renderizado sem o pendimento, o que é um fallback perfeitamente seguro.

Valor Inicial	`none`
Aplica-se a	Todos os elementos
Herdada	Sim
Animável	Não
Versão	CSS3
Sintaxe DOM	`object.style.hangingPunctuation = "first last";`

Sintaxe

hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;
hanging-punctuation: force-end;

/* Combine edge keywords */
hanging-punctuation: first last;
hanging-punctuation: first allow-end;
hanging-punctuation: first force-end;
hanging-punctuation: last allow-end;
hanging-punctuation: last force-end;

/* Global values */
hanging-punctuation: initial;
hanging-punctuation: inherit;
hanging-punctuation: unset;

Até três palavras-chave podem aparecer em uma declaração: no máximo uma palavra-chave de borda inicial (first), no máximo uma de borda final (last) e no máximo uma de linha intermediária (allow-end ou force-end).

Quais caracteres pendem?

A especificação CSS define os caracteres "pendentes" como:

Pontuação de abertura que pende no início: ", ', «, ‹, e seus equivalentes do Leste Asiático.
Pontuação de fechamento que pende no final: ", ', », ›, ., ,, !, ?, 。, 、, e similares.

Apenas os caracteres na borda mais externa de uma linha são candidatos — a pontuação interna dentro de uma linha não é afetada.

Valores

Valor	Descrição
`none`	Nenhuma pontuação pende. Este é o valor padrão.
`first`	Um sinal de pontuação de abertura no início da primeira linha pende para fora da borda inicial da caixa.
`last`	Um sinal de pontuação de fechamento no final da última linha pende para fora da borda final da caixa.
`allow-end`	Um sinal de pontuação de fechamento no final de qualquer linha pende apenas se não couber de outra forma antes que a justificação seja aplicada.
`force-end`	Um sinal de pontuação de fechamento no final de cada linha sempre pende, independentemente de haver espaço suficiente.
`initial`	Redefine para o valor padrão (`none`).
`inherit`	Herda o valor calculado do elemento pai.
`unset`	Redefine para o valor herdado, caso a propriedade seja herdada (o que é o caso), efetivamente equivalente a `inherit`.

`allow-end` vs `force-end`

A distinção entre esses dois valores de pendimento final é sutil, mas importante:

allow-end — faz a pontuação final pender somente quando não cabe na linha antes que a justificação entre em efeito. Em outras palavras, o navegador usa o pendimento apenas como último recurso para evitar espaços de justificação incômodos.
force-end — sempre faz a pontuação final pender na margem em cada linha, independentemente do espaço disponível. Isso pode criar uma margem óptica consistente, mas pode parecer estranho em linhas curtas.

Use allow-end para texto corrido onde você deseja sutileza; use force-end quando quiser um efeito estrito de alinhamento de margem óptica semelhante a sistemas tipográficos tradicionais.

`hanging-punctuation: first`

O valor first permite que um sinal de pontuação de abertura na primeira linha penda para fora da borda inicial (esquerda, em texto LTR) da caixa contenedora. O resultado é que o texto do corpo permanece opticamente alinhado enquanto a aspa de abertura flutua para a margem.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      blockquote {
        font-style: normal;
        font-size: 25px;
        width: 20em;
        border-left: 1px solid #000;
        padding: 3rem 0;
        hanging-punctuation: first;
      }
    </style>
  </head>
  <body>
    <h2>Hanging-punctuation property example</h2>
    <blockquote>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s".</blockquote>
  </body>
</html>

Experimente Você Mesmo »

Resultado

![Propriedade CSS hanging-punctuation](/uploads/media/default/0001/04/da969d68b09b2be6083c7027f773927d30f8cabe.png "CSS hanging-punctuation property result" =420x)

O caractere " de abertura move-se para a esquerda da linha de borda, de modo que o L em Lorem fica visualmente alinhado com as linhas abaixo.

`hanging-punctuation: last`

O valor last faz pender um sinal de pontuação de fechamento — como um ponto final, vírgula ou aspa de fechamento na última linha — para fora da borda final (direita, em texto LTR) da caixa. Isso é mais útil em texto alinhado à direita ou justificado, onde um sinal de pontuação na margem evita uma borda óptica irregular.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 22px;
        width: 16em;
        text-align: justify;
        border-right: 1px solid #000;
        padding: 1rem 0;
        hanging-punctuation: last;
      }
    </style>
  </head>
  <body>
    <h2>hanging-punctuation: last</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry, used here to show a trailing punctuation mark.
    </p>
  </body>
</html>

O ponto final ao fim do parágrafo desloca-se para a direita da borda, mantendo a borda direita do bloco justificado opticamente limpa.

Combinando valores

Você pode combinar first, last e uma das palavras-chave de pendimento final em uma única declaração. A ordem das palavras-chave não importa:

/* Hang opening quote at start AND closing punctuation at end */
blockquote {
  hanging-punctuation: first last;
}

/* Hang opening quote at start, and allow end-punctuation to hang when needed */
p {
  hanging-punctuation: first allow-end;
}

Combinar first last é um padrão tipográfico comum para citações em bloco: a " de abertura pende no canto superior esquerdo e a " ou . de fechamento pende no canto inferior direito.

Dicas de uso prático

Combine com text-indent para alinhamento óptico. Se você definir um text-indent negativo em um contêiner, hanging-punctuation: first e text-indent podem entrar em conflito. Prefira hanging-punctuation a um recuo negativo manual — é semanticamente correto e degrada de forma elegante.

Combine com texto justificado. hanging-punctuation: last e force-end funcionam melhor com text-align: justify (veja text-align). Em texto alinhado à esquerda, o efeito geralmente é invisível, a menos que a última linha termine exatamente na borda da caixa.

Use em <blockquote> e citações destacadas. Esses elementos quase sempre começam com uma aspa de abertura, tornando hanging-punctuation: first o lugar mais impactante e menos arriscado para aplicá-la.

Melhoria progressiva — sem necessidade de @supports. Como a propriedade é herdada e degrada para none, você pode aplicá-la com segurança sem uma consulta de funcionalidade:

blockquote {
  hanging-punctuation: first last; /* ignored by Chrome/Edge/Firefox; used by Safari */
}

Propriedades relacionadas

Estas propriedades são comumente usadas junto com hanging-punctuation ao ajustar a tipografia:

text-align — define o alinhamento horizontal; justify torna o pendimento de pontuação final mais perceptível.
text-justify — controla como o texto justificado distribui espaço entre palavras e caracteres.
text-indent — recua a primeira linha de um bloco; pode ser combinado com hanging-punctuation: first.
hyphens — controla a hifenização automática; combinado com hanging-punctuation, oferece controle tipográfico completo sobre os finais de linha.
white-space — governa como os espaços em branco e as quebras de linha dentro do texto são tratados.

Prática

O que a propriedade hanging-punctuation em CSS faz?

Determina se os elementos podem se sobrepor uns aos outros.Permite que um sinal de pontuação seja posicionado fora da borda da caixa de linha.Generaliza a ideia de inserir conteúdo antes ou depois do conteúdo de um elemento.Posiciona os sinais de pontuação no centro da caixa de linha.