hanging-punctuation
Allows punctuation to hang outside the line box. Creates traditional typography with punctuation hanging in margins.
Quick example
blockquote { hanging-punctuation: first last; }Syntax
none | [ first || [ force-end | allow-end ] || last ]Quick facts
Initial value
noneInherited
Yes
Examples
Allow quotes to hang outside text box
blockquote {
hanging-punctuation: first;
}
/* Opening quote sits outside the left margin */Let punctuation extend beyond the margin for cleaner text alignment.
Hang multiple punctuation types
p {
hanging-punctuation: first last allow-end;
}
/* Quotes and periods hang outside margins */Control where punctuation can hang for professional typography.
hanging-punctuation Browser Support
Limited availability 25% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Common pitfalls
Limited browser support
hanging-punctuation is CSS Text 3 but has minimal browser support. Use as progressive enhancement only; fallback to regular alignment for production.
Requires careful font metrics
hanging-punctuation behavior depends on font metrics and character widths. Test thoroughly with your chosen font.