hyphensプロパティの説明
CSSのhyphensプロパティは、文章の折り返しが発生する祭に単語の折り返しやハイフネーションの規則をどうするのかを指定します。
この機能は、主に英文の長い単語を記述した時に必要となります。画面の端や親要素の終端に単語がぶつかった時、そのまま一行を保つのか、折り返してハイフンでつなぐのかを判断する場面があります。そのような状況でブラウザがどのように処理するのか、hyphensで判断基準を与えることができます。
改行位置をあらかじめ想定してハイフンを挿入する箇所を特定する場合は、単語の中に­を追記します。このコードは、選択不可能なソフトハイフンを表します。通常は画面に表示されませんが、単語が折り返された時にハイフンでつなぐ箇所を示します。
始めからハイフンを表示しておく箇所には‐を配置します。この場合、折り返しが発生しなくともハイフンは表示されます。
hyphensに指定できる値
manual- 単語内に分割候補の提案が配置されていれば、その位置で折り返します。これが初期値です。
auto- ブラウザがハイフネーションを行う位置を自動的に判断して単語を分割します。単語内に分割候補の提案が配置されていれば、その位置を優先します。
none- 単語内に分割候補の提案が配置されていても改行を行いません。行はホワイトスペースの位置で折り返されます。
hyphensの使い方とサンプルコード
hyphensプロパティの構文は以下の通りです。
/* キーワード値 */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* グローバル値 */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: unset;
hyphensの実例
それでは実際にhyphensプロパティの書き方を見ていきましょう。対応しているブラウザであれば、hyphensに与えた値によって書式を最適化します。
<div class="samp_box" lang="en">
<h2>hyphens: none;</h2>
<p class="hp_none">Hyper­Text­Markup­Language and Cascading­Style­Sheets. Hyper­Text­Markup­Language and Cascading­Style­Sheets.</p>
<h2>hyphens: auto;</h2>
<p class="hp_auto">Hyper­Text­Markup­Language and Cascading­Style­Sheets. Hyper­Text­Markup­Language and Cascading­Style­Sheets.</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 {
hyphens: none;
}
.hp_auto {
hyphens: auto;
}