hanging-punctuationプロパティの説明
CSSのhanging-punctuationプロパティは、句読点、括弧、引用符などの禁則処理を指定します。文章の行頭や行末に区切り記号が配置されそうな時、それをぶら下げるべきか禁止すべきかを定めます。これに該当する区切り記号は、行ボックスの外側に配置されれることがあります。
hanging-punctuationに指定できる値
none- 禁則処理を行いません。これが初期値です。
first- 要素の行頭にある開き括弧または引用符をぶら下げます。
last- 要素の行末にある閉じ括弧または引用符をぶら下げます。
force-end- 行末の句読点をぶら下げます。
allow-end- 句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。
hanging-punctuationの使い方とサンプルコード
hanging-punctuationプロパティの構文は以下の通りです。
/* キーワード値 */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;
/* 2つのキーワード指定 */
hanging-punctuation: first last;
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;
/* 3つのキーワード指定 */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;
/* グローバル値 */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: revert;
hanging-punctuation: unset;
hanging-punctuationの実例
それでは実際にhanging-punctuationプロパティの書き方を見ていきましょう。同じ内容が書かれた段落を並べて、禁則処理を無効にしたものと有効にしたものとの挙動を比較します。対応しているブラウザであれば、行頭や行末に書かれている括弧や句読点が既定の書式からはみ出して表示されます。
<div class="samp_box">
<h2>hanging-punctuation: none;</h2>
<p class="hp_none">「CSS」は、HTMLやXMLなどで作成されたドキュメントの装飾を行うマークアップ言語です。この要素は次のプロパティに対応しているブラウザであれば幅を変更できます："resize"</p>
<h2>hanging-punctuation: first last;</h2>
<p class="hp_fl">「CSS」は、HTMLやXMLなどで作成されたドキュメントの装飾を行うマークアップ言語です。この要素は次のプロパティに対応しているブラウザであれば幅を変更できます："resize"</p>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
resize: horizontal;
}
.samp_box > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box > p {
margin: .5rem 0 0;
padding: .3rem;
background: #fff;
}
.hp_none {
hanging-punctuation: none;
}
.hp_fl {
hanging-punctuation: first last;
}