hanging-punctuation

hanging-punctuation 属性旨在为网页设计师提供更细粒度的网页排版控制。

悬挂标点符号背后的理念是将一些标点符号从文本元素的开头（或在较小程度上在结尾）“移出”框外，以保持阅读流程。

基本上，它会稍微将引号、项目符号或其他任何符号向左移动（或在 rtl 模式下向右移动），以便第一个字母与文档的其余部分正确对齐。

请注意，此属性是可选的，因此浏览器制造商可以选择支持或不支持它。

语法

hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]

blockquote p {
  hanging-punctuation: first;
}

none

没有字符悬挂。这是此属性的默认值。

first

元素首行格式化行的开头出现的可用字符将悬挂。

last

元素末行格式化行的结尾出现的可用字符将悬挂。

force-end

行尾的句号或逗号将悬挂。

标点符号被强制悬挂，并且在测量行以进行对齐时不予考虑。

allow-end

如果行尾的句号或逗号在对齐之前无法容纳，则会悬挂。

首行的行尾标点符号不会悬挂，因为它无需悬挂即可容纳。但是，在第二行，空间不足，因此会悬挂。

可用字符

代码	字符	名称
U+002C	,	COMMA
U+002E	.	FULL STOP
U+060C	،	ARABIC COMMA
U+06D4	۔	ARABIC FULL STOP
U+3001	、	IDEOGRAPHIC COMMA
U+3002	。	IDEOGRAPHIC FULL STOP
U+FF0C	，	FULLWIDTH COMMA
U+FF0E	．	FULLWIDTH FULL STOP
U+FE50	﹐	SMALL COMMA
U+FE51	﹑	SMALL IDEOGRAPHIC COMMA
U+FE52	﹒	SMALL FULL STOP
U+FF61	｡	HALFWIDTH IDEOGRAPHIC FULL STOP
U+FF64	､	HALFWIDTH IDEOGRAPHIC COMMA

请注意，用户代理可以将任何字符添加到此列表中。引用规范

UA 可以根据需要包含其他字符。

相关属性

• text-indent
• text-align

其他资源

• 规范中的 hanging-punctuation
• hanging-punctuation with CSS 作者：Steve Hickey

浏览器支持

对于不支持的浏览器，可以使用负的 text-indent 作为回退

blockquote p {
  text-indent: -0.5em; /* Change according to your font */
}

对于项目符号列表，您可能需要确保项目符号的位置设置为 outside，并且容器的溢出没有设置为 hidden。