CSS hanging-punctuation Property

Description

This css property may be dropped in the future. Use with caution.

The hanging-punctuation property determines whether a punctuation mark, if one is present, may be placed outside the line box at the start or at the end of a full line of text.

Initial value: none
Applies to: Inline elements
Inherited: No
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
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

HTML

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

CSS

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

Result

Browser Support

Desktop

X	X	X	X	X	10

Tablets / Mobile

X	X	X	X	10	X

Last updated by CSSPortal on: 3rd November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu