CSS hanging-punctuation Property

The hanging-punctuation property in CSS provides web designers some upper hand over typography on the webpage. The hanging-punctuation property specifies whether a punctuation mark is placed outside the line box at the start or at the end of some line of text.

Basically, It allows the web designers to set bullets or any symbols to the specific alignment either left or right so that the first letter is properly aligned with the rest of the document. We can use the following keywords along with hanging-punctuation property and can use in different modes or types:  

  • Keyword values.
  • Two Keyword values.
  • Three Keyword values.
  • Global Keyword values.



Property Values

Value Description
none At the beginning or end of a full line of text, no punctuation mark may be placed outside the line box.
first Punctuation may extend beyond the first line's start edge.
last Punctuation may extend beyond the last line's end edge.
allow-end If the punctuation does not otherwise fit prior to justification, it may hang outside the end edge of all lines.
force-end Punctuation may extend beyond the end of all lines. If justification is enabled on this line, the punctuation will be forced to hang.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
hanging-punctuation Not supported Not supported 10+ Not supported Not supported