CSS hanging-punctuation Property

The CSS hanging-punctuation property controls whether a punctuation mark — such as an opening or closing quotation mark, comma, or period — should hang outside the start or end edge of a line box instead of sitting inside the content area.

The technique comes from print typography: when a paragraph begins with an opening quotation mark, letting that mark sit to the left of the left text edge keeps the actual letters optically aligned. The same idea applies to trailing punctuation — a hanging period or comma keeps a justified paragraph's right edge looking clean and sharp.

Browser support is limited. As of 2026, hanging-punctuation is only supported in Safari (the WebKit engine). Chrome, Edge, and Firefox ignore it. Treat it as a progressive enhancement — when the browser does not support it, text simply renders without hanging, which is a perfectly safe fallback.

Initial Value	`none`
Applies to	All elements
Inherited	Yes
Animatable	No
Version	CSS3
DOM Syntax	`object.style.hangingPunctuation = "first last";`

Syntax

hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;
hanging-punctuation: force-end;

/* Combine edge keywords */
hanging-punctuation: first last;
hanging-punctuation: first allow-end;
hanging-punctuation: first force-end;
hanging-punctuation: last allow-end;
hanging-punctuation: last force-end;

/* Global values */
hanging-punctuation: initial;
hanging-punctuation: inherit;
hanging-punctuation: unset;

Up to three keywords can appear in one declaration: at most one start-edge keyword (first), at most one end-edge keyword (last), and at most one mid-line keyword (allow-end or force-end).

Which characters hang?

The CSS specification defines "hanging" characters as:

Opening punctuation that hangs at the start: ", ', «, ‹, and their East Asian equivalents.
Closing punctuation that hangs at the end: ", ', », ›, ., ,, !, ?, 。, 、, and similar.

Only the characters on the outermost edge of a line are candidates — inner punctuation within a line is unaffected.

Values

Value	Description
`none`	No punctuation hangs. This is the default.
`first`	An opening punctuation mark at the start of the first line hangs outside the start edge of the box.
`last`	A closing punctuation mark at the end of the last line hangs outside the end edge of the box.
`allow-end`	A closing punctuation mark at the end of any line hangs only if it would not otherwise fit before justification is applied.
`force-end`	A closing punctuation mark at the end of every line always hangs, regardless of whether it would have fit.
`initial`	Resets to the default value (`none`).
`inherit`	Inherits the computed value from the parent element.
`unset`	Resets to the inherited value if the property is inherited (which it is), effectively the same as `inherit`.

`allow-end` vs `force-end`

The distinction between these two end-hanging values is subtle but important:

allow-end — hangs the end punctuation only when it would not fit on the line before justification takes effect. In other words, the browser uses hanging only as a last resort to avoid awkward justification gaps.
force-end — always hangs the end punctuation into the margin on every line, regardless of available space. This can create a consistent optical margin but may look odd on short lines.

Use allow-end for body text where you want subtlety; use force-end when you want a strict optical-margin alignment effect similar to traditional typesetting systems.

`hanging-punctuation: first`

The first value lets an opening punctuation mark on the first line hang outside the start (left, in LTR text) edge of the containing box. The result is that the body text stays optically aligned while the opening quote floats into the margin.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      blockquote {
        font-style: normal;
        font-size: 25px;
        width: 20em;
        border-left: 1px solid #000;
        padding: 3rem 0;
        hanging-punctuation: first;
      }
    </style>
  </head>
  <body>
    <h2>Hanging-punctuation property example</h2>
    <blockquote>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s".</blockquote>
  </body>
</html>

Try it Yourself »

Result

![CSS hanging-punctuation Property](/uploads/media/default/0001/04/da969d68b09b2be6083c7027f773927d30f8cabe.png "CSS hanging-punctuation property result" =420x)

The opening " character moves to the left of the border line, so the L in Lorem aligns visually with the lines below it.

`hanging-punctuation: last`

The last value hangs a closing punctuation mark — such as a period, comma, or closing quotation mark on the last line — outside the end (right, in LTR text) edge of the box. This is most useful on right-aligned or justified text, where a punctuation mark in the margin prevents a ragged optical edge.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 22px;
        width: 16em;
        text-align: justify;
        border-right: 1px solid #000;
        padding: 1rem 0;
        hanging-punctuation: last;
      }
    </style>
  </head>
  <body>
    <h2>hanging-punctuation: last</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry, used here to show a trailing punctuation mark.
    </p>
  </body>
</html>

The closing period at the end of the paragraph shifts to the right of the border, keeping the right edge of the justified block optically clean.

Combining values

You can combine first, last, and one of the end-hanging keywords in a single declaration. The order of keywords does not matter:

/* Hang opening quote at start AND closing punctuation at end */
blockquote {
  hanging-punctuation: first last;
}

/* Hang opening quote at start, and allow end-punctuation to hang when needed */
p {
  hanging-punctuation: first allow-end;
}

Combining first last is a common typographic pattern for block-quotes: the opening " hangs at the top-left and the closing " or . hangs at the bottom-right.

Practical usage tips

Pair with text-indent for optical alignment. If you set a negative text-indent on a container, hanging-punctuation: first and text-indent can conflict. Prefer hanging-punctuation over a manual negative indent — it is semantically correct and degrades gracefully.

Pair with justified text. hanging-punctuation: last and force-end work best with text-align: justify (see text-align). On left-aligned text the effect is usually invisible unless the last line ends right at the box edge.

Use on <blockquote> and pull-quotes. These elements almost always begin with an opening quote, making hanging-punctuation: first the most impactful and least risky place to apply it.

Progressive enhancement — no @supports needed. Because the property is inherited and degrades to none, you can safely apply it without a feature query:

blockquote {
  hanging-punctuation: first last; /* ignored by Chrome/Edge/Firefox; used by Safari */
}

These properties are commonly used alongside hanging-punctuation when fine-tuning typography:

text-align — sets horizontal alignment; justify makes hanging end-punctuation most noticeable.
text-justify — controls how justified text distributes space between words and characters.
text-indent — indents the first line of a block; can be combined with hanging-punctuation: first.
hyphens — controls automatic hyphenation; combining with hanging-punctuation gives full typographic control over line endings.
white-space — governs how whitespace and line breaks inside text are handled.

Practice

What does the hanging-punctuation property in CSS do?

Determines whether elements can overshadow one another.Allows a punctuation mark to be positioned outside the line box edge.Generalizes the idea of inserting content before or after an element's content.Positions the punctuation marks in the center of the line box.