Propiedad CSS hanging-punctuation

La propiedad CSS hanging-punctuation controla si un signo de puntuación —como una comilla de apertura o cierre, una coma o un punto— debe colgar fuera del borde inicial o final de un cuadro de línea en lugar de situarse dentro del área de contenido.

La técnica proviene de la tipografía impresa: cuando un párrafo comienza con una comilla de apertura, dejar que ese signo quede a la izquierda del borde izquierdo del texto mantiene las letras alineadas ópticamente. La misma idea se aplica a la puntuación final: un punto o una coma colgante mantiene el borde derecho de un párrafo justificado limpio y nítido.

La compatibilidad con navegadores es limitada. A partir de 2026, hanging-punctuation solo está soportado en Safari (el motor WebKit). Chrome, Edge y Firefox lo ignoran. Trátalo como una mejora progresiva: cuando el navegador no lo admite, el texto simplemente se renderiza sin colgar, lo cual es un retroceso perfectamente seguro.

Valor inicial	`none`
Se aplica a	Todos los elementos
Heredado	Sí
Animable	No
Versión	CSS3
Sintaxis DOM	`object.style.hangingPunctuation = "first last";`

Sintaxis

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;

En una misma declaración pueden aparecer hasta tres palabras clave: como máximo una de borde inicial (first), como máximo una de borde final (last) y como máximo una de línea intermedia (allow-end o force-end).

¿Qué caracteres cuelgan?

La especificación CSS define los caracteres "colgantes" como:

Puntuación de apertura que cuelga al inicio: ", ', «, ‹ y sus equivalentes del Asia Oriental.
Puntuación de cierre que cuelga al final: ", ', », ›, ., ,, !, ?, 。, 、 y similares.

Solo los caracteres situados en el borde más externo de una línea son candidatos; la puntuación interior dentro de una línea no se ve afectada.

Valores

Valor	Descripción
`none`	No cuelga ningún signo de puntuación. Es el valor predeterminado.
`first`	Un signo de puntuación de apertura al inicio de la primera línea cuelga fuera del borde inicial del cuadro.
`last`	Un signo de puntuación de cierre al final de la última línea cuelga fuera del borde final del cuadro.
`allow-end`	Un signo de puntuación de cierre al final de cualquier línea cuelga solo si de otro modo no cabría antes de aplicar la justificación.
`force-end`	Un signo de puntuación de cierre al final de cada línea siempre cuelga, independientemente de si hubiera cabido.
`initial`	Restablece el valor predeterminado (`none`).
`inherit`	Hereda el valor calculado del elemento padre.
`unset`	Restablece el valor heredado si la propiedad se hereda (que es el caso), con el mismo efecto que `inherit`.

`allow-end` vs `force-end`

La distinción entre estos dos valores de cuelgue final es sutil pero importante:

allow-end — cuelga la puntuación final solo cuando no cabe en la línea antes de que entre en efecto la justificación. En otras palabras, el navegador usa el cuelgue únicamente como último recurso para evitar huecos de justificación incómodos.
force-end — siempre cuelga la puntuación final hacia el margen en cada línea, independientemente del espacio disponible. Esto puede crear un margen óptico coherente, pero puede resultar extraño en líneas cortas.

Usa allow-end en el texto de cuerpo cuando quieras sutileza; usa force-end cuando desees un efecto de alineación de margen óptico estricto similar al de los sistemas tipográficos tradicionales.

`hanging-punctuation: first`

El valor first permite que un signo de puntuación de apertura en la primera línea cuelgue fuera del borde inicial (izquierdo, en texto de izquierda a derecha) del cuadro contenedor. El resultado es que el texto del cuerpo permanece alineado ópticamente mientras la comilla de apertura flota hacia el margen.

<!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>

Pruébalo tú mismo »

Resultado

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

El carácter " de apertura se desplaza a la izquierda de la línea del borde, de modo que la L de Lorem queda visualmente alineada con las líneas inferiores.

`hanging-punctuation: last`

El valor last cuelga un signo de puntuación de cierre —como un punto, una coma o una comilla de cierre en la última línea— fuera del borde final (derecho, en texto de izquierda a derecha) del cuadro. Resulta más útil en texto alineado a la derecha o justificado, donde un signo de puntuación en el margen evita un borde óptico 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>

El punto final al término del párrafo se desplaza a la derecha del borde, manteniendo el margen derecho del bloque justificado ópticamente limpio.

Combinación de valores

Puedes combinar first, last y una de las palabras clave de cuelgue final en una sola declaración. El orden de las palabras clave no 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 es un patrón tipográfico habitual para citas en bloque: la " de apertura cuelga en la parte superior izquierda y la " o . de cierre cuelga en la parte inferior derecha.

Consejos de uso práctico

Combínalo con text-indent para la alineación óptica. Si estableces un text-indent negativo en un contenedor, hanging-punctuation: first y text-indent pueden entrar en conflicto. Prefiere hanging-punctuation sobre una sangría negativa manual: es semánticamente correcto y degrada de forma elegante.

Combínalo con texto justificado. hanging-punctuation: last y force-end funcionan mejor con text-align: justify (ver text-align). En texto alineado a la izquierda, el efecto suele ser invisible a menos que la última línea termine justo en el borde del cuadro.

Úsalo en <blockquote> y citas destacadas. Estos elementos casi siempre comienzan con una comilla de apertura, lo que convierte a hanging-punctuation: first en el lugar más impactante y menos arriesgado donde aplicarlo.

Mejora progresiva — no necesitas @supports. Dado que la propiedad se hereda y retrocede a none, puedes aplicarla de forma segura sin una consulta de características:

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

Propiedades relacionadas

Estas propiedades se usan habitualmente junto a hanging-punctuation al ajustar la tipografía:

text-align — establece la alineación horizontal; justify hace que la puntuación final colgante sea más perceptible.
text-justify — controla cómo el texto justificado distribuye el espacio entre palabras y caracteres.
text-indent — sangra la primera línea de un bloque; puede combinarse con hanging-punctuation: first.
hyphens — controla la separación silábica automática; combinarlo con hanging-punctuation ofrece un control tipográfico completo sobre los finales de línea.
white-space — regula cómo se gestiona el espacio en blanco y los saltos de línea dentro del texto.

Práctica

¿Qué hace la propiedad hanging-punctuation en CSS?

Determina si los elementos pueden superponerse entre sí.Permite posicionar un signo de puntuación fuera del borde del cuadro de línea.Generaliza la idea de insertar contenido antes o después del contenido de un elemento.Posiciona los signos de puntuación en el centro del cuadro de línea.