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.
Syntax
Example
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 |