CSS - hyphenate-limit-chars

• トップ
• 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>

リンク

• https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars
• https://developer.mozilla.org/ja/docs/Web/CSS/hyphenate-limit-chars
• https://caniuse.com/mdn-css_properties_hyphenate-limit-chars