CSS Tutorial

Why CSSCSS EditorsCSS How toCSS Comments

CSS Basic Properties

CSS ColorCSS backgroundCSS borderCSS border-styleCSS border-colorCSS border-widthCSS border-radiusCSS border-imageCSS outlineCSS marginCSS paddingCSS list-styleCSS PositionCSS fontCSS floatCSS clearCSS overflowCSS scroll-behaviorCSS transitionCSS animation

CSS Width

CSS widthCSS max-widthCSS min-width

CSS Height

CSS heightCSS max-heightCSS min-height

CSS Spacing

CSS letter-spacingCSS word-spacingCSS word-wrapCSS word-breakCSS white-space

CSS Text Formatting

CSS font-size-adjustCSS font-kerningCSS text-alignCSS text-align-lastCSS text-decoration-lineCSS text-decoration-styleCSS text-decoration-colorCSS text-decorationCSS text-transformCSS text-indentCSS directionCSS text-shadowCSS text-overflowCSS vertical-alignCSS unicode-bidiCSS writing-modeCSS all

CSS Pre

CSS tab-size

CSS Tables

CSS border-spacingCSS border-collapseCSS caption-sideCSS empty-cellsCSS table-layout

CSS Image

CSS Image SpritesCSS object-fitCSS object-positionCSS clip-pathCSS filterCSS mix-blend-mode

CSS Isolation

CSS isolation

CSS Content

CSS contentCSS counter-incrementCSS counter-reset

CSS Quotation

CSS quotesCSS hanging-punctuation

CSS Visibility

CSS visibilityCSS displayCSS opacityCSS z-indexCSS backface-visibility

CSS Flexbox

CSS flexboxCSS justify-contentCSS flex-directionCSS flex-wrapCSS flex-flowCSS align-itemsCSS align-contentCSS orderCSS flex-growCSS flex-shrinkCSS flex-basisCSS flexCSS align-self

CSS grid

CSS grid layoutCSS grid-template-rowsCSS grid-template-columnsCSS grid-template-areasCSS grid-templateCSS grid-auto-rowsCSS grid-auto-columnsCSS grid-auto-flowCSS gridCSS grid-row-startCSS grid-column-startCSS grid-row-endCSS grid-column-endCSS grid-rowCSS grid-columnCSS grid-areaCSS grid-row-gapCSS grid-column-gapCSS grid-gap

CSS Mouse

CSS cursorCSS pointer-eventsCSS caret-colorCSS user-select

CSS Transform

CSS transformCSS transform-originCSS transform-styleCSS perspectiveCSS perspective-origin

CSS Column

CSS columnsCSS column-countCSS column-fillCSS column-gapCSS column-ruleCSS column-rule-colorCSS column-rule-styleCSS column-rule-widthCSS column-spanCSS column-width

CSS Box

CSS box-decoration-breakCSS hyphensCSS resizeCSS box-sizingCSS box-shadow

CSS Print

CSS page-break-afterCSS page-break-beforeCSS page-break-inside

CSS @ Rules

CSS @charsetCSS @font-faceCSS @keyframesCSS @mediaCSS @import

CSS Reference

CSS lengthCSS Animatable PropertiesCSS Selectors

CSS hanging-punctuation Property

Last Updated:

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>

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.

ValueExplanation
noneSpecifies no character hangs.
firstSpecifies an opening bracket or quote at the start of the first formatted line of an element hangs.
lastSpecifies a closing bracket or quote at the end of the last formatted line of an element hangs.
force-endSpecifies a stop or comma at the end of a line hangs.
allow-endSpecifies a stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
hanging-punctuationNoYesNoNoNoNoNoYesNoNoNoNoNo

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>

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>

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>

Share this Page

Meet the Author