CSS hanging-punctuation Property

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

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

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.




Related articles