CSS hanging-punctuation Property

❮ Prev Next ❯

The hanging-punctuation property specifies whether a punctuation mark should hang at the start or at the end of a text’s line.

Hanging punctuation is used with fully-justified text and controls over the alignment of all the lines in a paragraph of text when used at the end of the lines.

Only Safari supports this property.

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

Syntax

hanging-punctuation: none | first | last | allow-end | force-end | initial | inherit;

Example of the hanging-punctuation property:

<!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

Values

Value	Description
none	No punctuation mark will be placed. This is the default value of this property.
first	A punctuation mark will hang outside the start edge of the first line.
last	A punctuation mark will hang outside the end edge of the first line.
allow-end	A punctuation mark will hang outside the end edge of a line if it does not otherwise fit prior to justification.
force-end	A punctuation mark will hang outside the end edge of all lines. If justification is enabled on this line, then it will force the punctuation to hang.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.