Web/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;
}

Specifications

Specification	Status	Comment
CSS Text Module Level 3The 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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
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 Notes' Partial support 10 Notes' Notes' The force-end keyword is recognized but has no effect.	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 Notes' Partial support 10 Notes' Notes' The force-end keyword is recognized but has no effect.	Samsung Internet Android No support No

Legend

Partial support  

Partial support

No support  

No support

See implementation notes.'

See implementation notes.

hanging-punctuation by Mozilla Contributors is licensed under CC-BY-SA 2.5.