It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Hanging-Punctuation Property

Reading time 2 min
Published Aug 8, 2017
Updated Oct 1, 2019

Hanging quotations in CSS

The CSS hanging-punctuation property defines if a punctuation mark will be displayed outside of the line box or at the beginning (or end) of a full line:

Example
div {
    hanging-punctuation: last;
}

This property helps you control the typography part of web design. It affects all types of stops and commas.

In the hanging quote example below, you can see the same quote formatted using different hanging-punctuation values. Notice the difference in the placement of the first HTML punctuation mark:
Hanging Punctuation

Hanging punctuation syntax

To define a hanging quotation in CSS, you need to define from one to three out of five available values:

hanging-punctuation: value1 value2 value3;

The values you can choose from to specify hanging punctuation are explained in the table below.

CSS hanging-punctuation property values

Value Description
none The default value. There is no hanging punctuation marks
first There is one hanging punctuation mark at the start of the first line
last There is one hanging punctuation mark at the end of the last line
force-end There is one hanging punctuation mark at the end of the line
allow-end There is one hanging punctuation mark at the end of the line if it cannot fit

Note: this is an experimental property, so the browser support is rather poor. You can use text-indent with a negative value as a fallback.

Browser support

Browser image
Chrome
-
Browser image
Edge
-
Browser image
Firefox
-
Browser image
IE
-
Browser image
Opera
-
Browser image
Safari
10+

Mobile browser support

Browser image
Chrome
-
Browser image
Firefox
-
Browser image
Opera
-
Browser image
Safari
10+