CSS hanging-punctuation Property

What You’ll Learn

The hanging-punctuation property lets punctuation marks hang outside the text box so lines of body text align more cleanly.

Introduction

The hanging-punctuation property in CSS allows you to control the positioning of punctuation marks in relation to the surrounding text. This property is particularly useful for creating typographic effects, such as when you want punctuation marks to hang outside of the main text block for a cleaner, more visually appealing layout.

Definition and Usage

Apply hanging-punctuation on block-level text containers such as paragraphs, blockquotes, or articles. It works best with narrow columns and quoted text where opening or closing marks would otherwise push body text inward.

📝 Syntax

The syntax for the hanging-punctuation property is as follows:

element {
  hanging-punctuation: value;
}

The value can be one or more of the keywords below, separated by spaces:

• none
• first
• last
• first last
• allow-end
• allow-start

Basic Example

p {
  width: 200px;
  hanging-punctuation: first;
}

Default Value

The default value of the hanging-punctuation property is none, which means that no special hanging behavior is applied to punctuation marks.

Syntax Rules

• Applies to block containers that hold text.
• Accepts keyword values and combinations like first last.
• The property is inherited.
• Works best with narrow widths and punctuation-heavy content.
• Support varies by browser; test before relying on it in production.

💎 Property Values

Examples Gallery

Hang opening quotes with first, closing marks with last, combine both, and compare against the default none value.

p {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  hanging-punctuation: first;
}

blockquote {
  max-width: 16rem;
  hanging-punctuation: last;
}

.quote {
  max-width: 18rem;
  hanging-punctuation: first last;
}

.normal { hanging-punctuation: none; }
.hanging { hanging-punctuation: first; }

♿ Accessibility

• Do not rely on hanging punctuation for meaning — the text must remain readable without the visual effect.
• Keep sufficient line length so quoted passages remain easy to read.
• Test with screen readers — punctuation is still announced normally in supporting browsers.
• Provide fallbacks since unsupported browsers ignore the property safely.
• Maintain contrast between text, punctuation, and background.

💡 Best Practices