CSS hanging-punctuation Property

Description

The hanging-punctuation CSS property is used to control the visual alignment of punctuation marks and other characters at the beginning or end of a line of text in a block-level element. This property is particularly useful for improving the aesthetics of text in various languages, as it allows you to specify whether punctuation marks should hang outside the text box or remain within the box boundaries. By using values like "first," "last," "force-end," or "force-none," web developers can fine-tune the positioning of punctuation marks, ensuring a visually appealing and culturally appropriate presentation of text in different contexts and languages.

Initial value

none

Applies to

Inline elements

Inherited

No

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.hangingPunctuation

Syntax

hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]

Values

• noneNo character hangs.
• firstAn opening bracket or quote at the start of the first formatted line of an element hangs. This applies to all characters in the Unicode categories Ps, Pf, Pi.
• force-endA stop or comma at the end of a line hangs.
• allow-endA stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.
• lastA closing bracket or quote at the end of the last formatted line of an element hangs. This applies to all characters in the Unicode categories Pe, Pf, Pi.

Example

<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>

p {
  hanging-punctuation: first last;
  margin: .5rem;
}

Browser Support

The following table will show you the current browser support for the CSS hanging-punctuation property.

Desktop
x	x	x	x	?

Tablets / Mobile
x	x	x	?	x	x

Last updated by CSSPortal on: 31st December 2023