| 属性名 | hyphenate-limit-chars |
|---|---|
| 値 | [ auto | <integer> ] {1,3} |
| 初期値 | auto |
| 適用可能要素 | テキスト要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/css-hyphenate-limit-chars |
英単語が何文字以上の場合にハイフネーションを行うかを指定します。
引数は 1～3個で下記の様に解釈されます。<total> は全体文字数、<before> はハイフン前文字数、<after> はハイフン後文字数を示します。
hyphenate-limit-chars: <total> <before> <after>; hyphenate-limit-chars: <total> <before>; /* <after> = <before> */ hyphenate-limit-chars: <total>; /* <before> = <after> = auto */
hyphenate-limit-chars を指定しない場合、多くのブラウザでは 5 2 2 が指定されたものとみなします。
hyphenate-limit-chars: 5 2 2;
英単語のハイフネーションは lang="en" が指定された要素で行われます。
<div lang="en"> ... </div>
英単語にはハイフン(-)を入れられる箇所と入れられない箇所があります。例えば下記の場所で入れることができます。
un-be-liev-able com-mu-nica-tion con-sider-ations ac-knowl-edge-ment mis-un-der-stand-ing
下記の様に、幅 1px の枠に hyphens: auto と hyphenate-limit-chars: 1 1 1; を指定してやると、単語のどの箇所で入れることができるかを調べることができます。
.my-box {
width: 1px;
hyphens: auto;
}
<div class="my-box" lang="en" style="hyphenate-limit-chars: 1 1 1;">misunderstanding</div>
<total>)文字数が <total> 以上になるとハイフネーションを行います。misunderstanding は16文字なので、<total> が 17 だとまだハイフネーションしませんが、16 だとハイフネーションします。understanding の部分は13文字で16文字に達していないのでハイフネーションしません。
.my-box {
width: 1px;
hyphens: auto;
margin-bottom: 1rem;
}
<div class="my-box" lang="en" style="hyphenate-limit-chars: 17;">misunderstanding</div> <div class="my-box" lang="en" style="hyphenate-limit-chars: 16;">misunderstanding</div>
<before>)ハイフン前の文字数が最低でも <before> 文字になるように調整されます。<before> が 3 の場合、un- は2文字で条件を満たさず、under- の部分がハイフネーションしません。
<div class="my-box" lang="en" style="hyphenate-limit-chars: 1 2 1;">misunderstanding</div> <div class="my-box" lang="en" style="hyphenate-limit-chars: 1 3 1;">misunderstanding</div>
<after>)ハイフン後の文字数が最低でも <after> 文字になるように調整されます。<after> が 4 の場合、最後の img は3文字で条件を満たさず、standing の部分がハイフネーションしません。
<div class="my-box" lang="en" style="hyphenate-limit-chars: 1 1 3;">misunderstanding</div> <div class="my-box" lang="en" style="hyphenate-limit-chars: 1 1 4;">misunderstanding</div>