Article Categories

Selected Reading

CSS hanging-punctuation Property

CSS Web Development Front End Technology

The CSS hanging-punctuation property allows punctuation marks to be positioned outside the line box at the beginning or end of text lines. This creates better visual alignment by preventing punctuation from affecting text indentation.

Syntax

selector {
    hanging-punctuation: value;
}

Possible Values

Value	Description
`none`	No punctuation marks hang outside the line box (default)
`first`	Punctuation at the start of the first line hangs outside
`last`	Punctuation at the end of the last line hangs outside
`allow-end`	Punctuation at the end of lines may hang outside
`force-end`	Punctuation at the end of lines must hang outside

Example: Using hanging-punctuation

The following example demonstrates how hanging punctuation affects text alignment −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        width: 300px;
        border: 2px solid #333;
        padding: 10px;
        margin: 20px;
        font-size: 16px;
    }
    
    .normal {
        hanging-punctuation: none;
    }
    
    .hanging-first {
        hanging-punctuation: first;
    }
    
    .hanging-last {
        hanging-punctuation: last;
    }
</style>
</head>
<body>
    <div class="container normal">
        <h3>Normal (none)</h3>
        <p>"This is a quoted paragraph that demonstrates normal punctuation behavior."</p>
    </div>
    
    <div class="container hanging-first">
        <h3>Hanging First</h3>
        <p>"This is a quoted paragraph with first punctuation hanging outside the line box."</p>
    </div>
    
    <div class="container hanging-last">
        <h3>Hanging Last</h3>
        <p>"This paragraph demonstrates last punctuation hanging outside."</p>
    </div>
</body>
</html>

Three bordered containers appear:
1. Normal: Quote marks align with text, creating slight indentation
2. Hanging First: Opening quote mark hangs outside the left edge
3. Hanging Last: Closing quote mark hangs outside the right edge

Browser Support

Note: The hanging-punctuation property has limited browser support and is primarily supported in Safari. Most other browsers do not currently implement this property.

Browser Compatibility: This property is experimental and not widely supported. Test thoroughly across target browsers before using in production.

Conclusion

The hanging-punctuation property improves typography by allowing punctuation marks to hang outside line boxes. However, its limited browser support means it should be used as a progressive enhancement rather than a core design feature.

Lakshmi Srinivas

Updated on: 2026-03-15T13:20:24+05:30

192 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next