語法
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 |
瀏覽器相容性
載入中…