hanging-punctuation
CSS hanging-punctuation Property
The hanging-punctuation property specifies whether a punctuation mark should hang at the start or at the end of a text’s line.
Hanging punctuation is used with fully-justified text and controls over the alignment of all the lines in a paragraph of text when used at the end of the lines.
Only Safari supports this property.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.hangingPunctuation = “last”; |
Syntax
Syntax
hanging-punctuation: none | first | last | allow-end | force-end | initial | inherit;
Example of the hanging-punctuation property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
font-style: normal;
font-size: 25px;
width: 20em;
border-left: 1px solid #000;
padding: 3rem 0;
hanging-punctuation: first;
}
</style>
</head>
<body>
<h2>Hanging-punctuation property example</h2>
<blockquote>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s".</blockquote>
</body>
</html>
Result
Values
Values
| Value | Description |
|---|---|
| none | No punctuation mark will be placed. This is the default value of this property. |
| first | A punctuation mark will hang outside the start edge of the first line. |
| last | A punctuation mark will hang outside the end edge of the first line. |
| allow-end | A punctuation mark will hang outside the end edge of a line if it does not otherwise fit prior to justification. |
| force-end | A punctuation mark will hang outside the end edge of all lines. If justification is enabled on this line, then it will force the punctuation to hang. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |