CSS hanging-punctuation Property

Definition and Usage

The hanging-punctuation property controls whether punctuation may hang outside the line box at the start or end of a line. That keeps the main letters aligned while quotes or stops sit slightly outside the edge.

It applies to all elements, is inherited, and starts at none. You can combine keywords such as first last or first allow-end.

CSS Syntax

You may use one, two, or three keywords together (for example first last). allow-end and force-end cannot both be used.

Property Values

force-end forces a stop or comma to hang even when it would fit. Prefer allow-end for softer behavior.

How to Use hanging-punctuation

Use it on quoted text when you want optical alignment of the first letters.

1. Wrap quoted copy in a block such as <p> or <blockquote>.
2. Start the text with an opening quote or bracket if you use first.
3. Set hanging-punctuation: first, last, or both.
4. Check in Safari. Other browsers keep the punctuation inside the box.

Live Preview

Toggle hanging on a quoted paragraph. In Safari, the opening « can sit outside the border. Elsewhere, the text still looks fine.

CSS Examples

Each snippet focuses on hanging-punctuation. Test in Safari to see hanging. Use Try It Yourself for a live editor.

<style>
  p {
    hanging-punctuation: first;
  }
</style>

<p>&laquo;Hello from hanging punctuation.&raquo;</p>

<style>
  p {
    hanging-punctuation: first last;
  }
</style>

<p>&laquo;Quoted line with both ends.&raquo;</p>

<style>
  p {
    hanging-punctuation: none;
  }
</style>

<p>&laquo;Default: punctuation stays inside.&raquo;</p>

Key Takeaways