CSS hanging-punctuation Property

February 10, 2021 12:37 pm IST

You are Here:

CSS hanging-punctuation Property

CSS hanging-punctuation property specifies whether a punctuation mark should hang at the start or end of a line of text.

Note: Hanging punctuation may be placed outside the line box.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ hanging-punctuation: first; } </style> </head> <body> <h1>CSS hanging-punctuation Property</h1> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> </body> </html>

Run

Syntax

Using CSS

element{ hanging-punctuation: first; }

Using Javascript

object.style.hangingPunctuation="first";

Animatable

No, hanging-punctuation property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS hanging-punctuation property is none.

Property Value

The following table provides a list of values for CSS hanging-punctuation property.

Value	Explanation
none	Specifies no character hangs.
first	Specifies an opening bracket or quote at the start of the first formatted line of an element hangs.
last	Specifies a closing bracket or quote at the end of the last formatted line of an element hangs.
force-end	Specifies a stop or comma at the end of a line hangs.
allow-end	Specifies a stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

All in One

In the following example, we will demonstrate all values of CSS hanging-punctuation property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p:nth-child(3){ hanging-punctuation: none; } p:nth-child(5){ hanging-punctuation: first; } p:nth-child(7){ hanging-punctuation: last; } p:nth-child(9){ hanging-punctuation: force-end; } p:nth-child(11){ hanging-punctuation: allow-end; } </style> </head> <body> <h1>CSS hanging-punctuation Property</h1> <h2>hanging-punctuation: none;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> <h2>hanging-punctuation: first;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> <h2>hanging-punctuation: last;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> <h2>hanging-punctuation: force-end;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> <h2>hanging-punctuation: allow-end;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> </body> </html>

Run

Using Multiple Values

In the following example, we will demonstrate how to use multiple values for CSS hanging-punctuation property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p:nth-child(3){ hanging-punctuation: first; } p:nth-child(5){ hanging-punctuation: first force-end; } p:nth-child(7){ hanging-punctuation: first force-end last; } </style> </head> <body> <h1>CSS hanging-punctuation Property</h1> <h2>hanging-punctuation: first;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> <h2>hanging-punctuation: first force-end;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> <h2>hanging-punctuation: first force-end last;</h2> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS hanging-punctuation property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS hanging-punctuation Property</h1> <p>"Joanne Rowling was born on 31st July 1965 ..."</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.hangingPunctuation = "first"; } </script> </body> </html>

Run