The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.

/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

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

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

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


The hanging-punctuation property may be specified with one, two, or three space-separated values.

  • One-value syntax uses any one of the keyword values in the list below.
  • Two-value syntax uses one of the following:
    • first together with any one of last, allow-end, or force-end
    • last together with any one of first, allow-end, or force-end
  • Three-value syntax uses one of the following:
    • first, allow-end, and last
    • first, force-end, and last



No character hangs.


An opening bracket or quote at the start of the first formatted line of an element hangs.


A closing bracket or quote at the end of the last formatted line of an element hangs.


A stop or comma at the end of a line hangs.


A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

Formal definition

Initial valuenone
Applies toall elements
Computed valueas specified
Animation typediscrete

Formal syntax

hanging-punctuation = 
none |
[ first || [ force-end | allow-end ] || last ]


Setting opening and closing quotes to hang


  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim
  nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor
  massa, sit amet vulputate nulla pharetra ut."


p {
  hanging-punctuation: first last;
  margin: 0.5rem;



CSS Text Module Level 3
# hanging-punctuation-property

Browser compatibility

BCD tables only load in the browser

See also