W3cubDocs

/CSS

hanging-punctuation

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

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
hanging-punctuation No No No No No 10
10
The force-end keyword is recognized but has no effect.
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
hanging-punctuation No No No No 10
10
The force-end keyword is recognized but has no effect.
No

© 2005–2020 Mozilla 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