The CSS Hanging-Punctuation Property

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:

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

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

CSS hanging-punctuation property values

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

Chrome

-

Edge

-

Firefox

-

IE

-

Opera

-

Safari

10+

Mobile browser support

Chrome

-

Firefox

-

Opera

-

Safari

10+