W3docs
en
Log in

CSS hanging-punctuation Property

Use the CSS hanging-punctuation property to define whether a punctuation mark should hang at the start or at the end of a text’s line. Definition of the property, values and examples.

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 the alignment of all the lines in a paragraph of text when used at the end of the lines.

Initial Valuenone
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.hangingPunctuation = "last";

Syntax

Syntax of CSS hanging-punctuation Property

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

Example of the hanging-punctuation property:

Example of CSS hanging-punctuation Property with first value

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

Values

ValueDescription
noneHanging punctuation is not applied. This is the default value of this property.
firstA punctuation mark will hang outside the start edge of the first line.
lastA punctuation mark will hang outside the end edge of the last line.
allow-endA punctuation mark will hang outside the end edge of a line if it does not otherwise fit prior to justification.
force-endA 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.

Practice

Practice

What does the hanging punctuation property in CSS do?