hyphens：単語の折り返しやハイフネーションの規則を指定する

hyphensプロパティの説明

hyphensは、文章の折り返しが発生する祭に単語の折り返しやハイフネーションの規則をどうするのかを指定します。

この機能は、主に英文の長い単語を記述した時に必要となります。画面の端や親要素の終端に単語がぶつかった時、そのまま一行を保つのか、折り返してハイフンでつなぐのかを判断する場面があります。そのような状況でブラウザがどのように処理するのか、hyphensで判断基準を与えることができます。

改行位置をあらかじめ想定してハイフンを挿入する箇所を特定する場合は、単語の中に­を追記します。このコードは、選択不可能なソフトハイフンを表します。通常は画面に表示されませんが、単語が折り返された時にハイフンでつなぐ箇所を示します。

hyphensに指定できる値

none

禁則処理を行いません。これが初期値です。

first

要素の行頭にある開き括弧または引用符をぶら下げます。

last

要素の行末にある閉じ括弧または引用符をぶら下げます。

force-end

行末の句読点をぶら下げます。

allow-end

句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。

hyphensの使い方とサンプル

hyphensプロパティの構文は以下の通りです。

/* キーワード値 */
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に与えた値によって書式を最適化します。

.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;
}

<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>