hyphens:単語の折り返しやハイフネーションの規則を指定する
初期値 | manual |
適用対象 | 全ての要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
hyphensプロパティの説明
hyphens
は、文章の折り返しが発生する祭に単語の折り返しやハイフネーションの規則をどうするのかを指定します。
この機能は、主に英文の長い単語を記述した時に必要となります。画面の端や親要素の終端に単語がぶつかった時、そのまま一行を保つのか、折り返してハイフンでつなぐのかを判断する場面があります。そのような状況でブラウザがどのように処理するのか、hyphens
で判断基準を与えることができます。
改行位置をあらかじめ想定してハイフンを挿入する箇所を特定する場合は、単語の中に­
を追記します。このコードは、選択不可能なソフトハイフンを表します。通常は画面に表示されませんが、単語が折り返された時にハイフンでつなぐ箇所を示します。
hyphensに指定できる値
- none
- 禁則処理を行いません。これが初期値です。
- first
- 要素の行頭にある開き括弧または引用符をぶら下げます。
- last
- 要素の行末にある閉じ括弧または引用符をぶら下げます。
- force-end
- 行末の句読点をぶら下げます。
- allow-end
- 句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。
hyphensの使い方とサンプル
hyphens
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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;
hyphensの実例
それでは実際にhyphens
プロパティの書き方を見ていきましょう。対応しているブラウザであれば、hyphens
に与えた値によって書式を最適化します。
表示確認
CSS
.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;
}
HTML
<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>