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: unset;
Syntax
The hanging-punctuation
property may be specified with one, two, or three 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 oflast
,allow-end
, orforce-end
last
together with any one offirst
,allow-end
, orforce-end
- Three-value syntax uses one of the following:
first
,allow-end
, andlast
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 definition
Initial value | none |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
none | [ first | [ force-end | allow-end ] | last ]
Examples
Setting opening and closing quotes to hang
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 last; margin: .5rem; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'hanging-punctuation' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hanging-punctuation | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari
Partial support
10
| WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS
Partial support
10
| Samsung Internet Android No support No |
Legend
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- See implementation notes.