语法
css
/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;
/* Two keywords */
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last allow-end;
/* Three keywords */
hanging-punctuation: first allow-end last;
/* Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: revert;
hanging-punctuation: revert-layer;
hanging-punctuation: unset;
hanging-punctuation 属性可以指定一个、两个或三个以空格分隔的值。
值
none-
不悬挂任何字符。
first-
元素第一行开头处的开括号或引号悬挂。这适用于
last-
元素最后一行结尾处的闭括号或引号悬挂。这适用于
allow-end-
如果句号或逗号在对齐之前无法容纳，则悬挂在行尾。
允许悬挂的句号和逗号包括
U+002C，逗号U+002E，句号U+060C，阿拉伯逗号U+06D4，阿拉伯句号U+3001，表意逗号U+3002，表意句号U+FF0C，全角逗号U+FF0E，全角句号U+FE50，小逗号U+FE51，小表意逗号U+FE52，小句号U+FF61，半角表意句号U+FF64，半角表意逗号
用户代理可以包含额外的字符。
正式定义
正式语法
hanging-punctuation =
none |
[ first || [ force-end | allow-end ] || last ]
示例
设置开引号和闭引号悬挂
HTML
html
<p>
«For a moment, nothing happened. Then, after a second or so, nothing continued
to happen.»
</p>
<p class="hanging">
«For a moment, nothing happened. Then, after a second or so, nothing continued
to happen.»
</p>
<p class="hanging right">
«For a moment, nothing happened. Then, after a second or so, nothing continued
to happen.»
</p>
CSS
css
p {
width: 15em;
border: 1px solid #cccccc;
font-size: 2rem;
font-style: italic;
margin: 1em;
}
p.hanging {
hanging-punctuation: first last;
}
p.right {
text-align: right;
}
结果
规范
| 规范 |
|---|
| CSS Text Module Level 3 # hanging-punctuation-property |
浏览器兼容性
加载中…