段落・折り返し
hyphenate-character
hyphenate-character は、単語を行の途中で区切ったときに、区切った所に出す文字(ふつうはハイフン)を指定します。
構文
auto | <string>プレビュー
Internationalization needs extraordinary typographic care.
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
hyphens: auto;
font-size: 28px;
hyphenate-character: "=";
}コントロール
hyphenate-character"="
Internationalization needs extraordinary typographic care.
解説
値の意味
auto:初期値です。文章の言語の慣習に合った文字を、ブラウザが選びます(英語ならハイフン)。"="のような文字列:区切った所に、その文字列を出します。
使いどころ
区切りの印を、ハイフンとは違う文字にしたいときに使います。例えば、昔のドイツ語の組版で使われた二重ハイフン("⸗")や、等号で代用した "=" にできます。
気をつけること
- 区切るかどうかは
hyphensで決まり、この文字が出るのは区切った所だけです。hyphens: manual(初期値)ではソフトハイフン(­)の所、autoではそれに加えてブラウザが辞書で選んだ所で区切ります。noneでは区切らないので出ません。 - 文字によっては、使っているフォントに字形がなく、別のフォントで表示されることがあります。
- Safari 16 以前は
-webkit-hyphenate-characterと接頭辞を付けた名前でだけ対応しています。
このページのプレビューでは、補助の宣言で自動で区切るようにし(hyphens: auto)、長い単語が行に収まらないくらい文字を大きくしています(font-size: 28px)。英文の extraordinary と typographic には、区切ってよい所にソフトハイフンを入れてあります。