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 — single */ hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end; /* Keyword values — two */ hanging-punctuation: first force-end; hanging-punctuation: first allow-end; hanging-punctuation: first last; hanging-punctuation: last force-end; hanging-punctuation: last allow-end; /* Keyword values — three */ hanging-punctuation: first force-end last; hanging-punctuation: first allow-end last; /* Global values */ hanging-punctuation: inherit; hanging-punctuation: initial; hanging-punctuation: unset;
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
This property may be specified with one, two, or three values.
One-value syntax: any one of the keyword values listed below.
Two value syntax:
- either
firsttogether with any one of:last,allow-end, orforce-end - or
lasttogether with any one of:first,allow-end, orforce-end.
Three-value syntax:
- either
first,allow-end, andlast - or
first,force-end, andlast.
Values
- none
- No character hangs.
first- An opening bracket or quote at the start of the first formatted line of an element hangs.
last- A closing bracket or quote at the end of the last formatted line of an element hangs.
force-end- A stop or comma at the end of a line hangs.
allow-end- A stop or comma at the end of a line hangs, if it does not otherwise fit prior to justification.
Formal syntax
none | [ first || [ force-end | allow-end ] || last ]
Example
HTML
<p>“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>
CSS
p {
hanging-punctuation: first;
margin: .5rem;
}