This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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;
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 |
The hanging-punctuation
property may be specified with one, two, or three values.
first
together with any one of last
, allow-end
, or force-end
last
together with any one of first
, allow-end
, or force-end
first
, allow-end
, and last
first
, force-end
, and last
none
first
last
force-end
allow-end
none | [ first || [ force-end | allow-end ] || last ]
<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>
p { hanging-punctuation: first last; margin: .5rem; }
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'hanging-punctuation' in that specification. | Working Draft | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | No | No | No | No | 10 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | No | No | No | No | 10 | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation