hyphenate-limit-charsでハイフネーションされる文字数を制御する

英語の1単語が長く折り返しが発生する場合に、hyphensプロパティを使うことでハイフネーションができる。

さらにhyphenate-limit-charsプロパティを使うことで、ハイフネーションを許可する単語の長さや、ハイフン前後の最小文字数を指摘できる。

p {
  hyphens: auto;
  /**
   * ハイフネーションを許可する単語の最小文字数: 10
   * ハイフン前の最小文字数: 4
   * ハイフン後の最小文字数: 4
   */
  hyphenate-limit-chars: 10 4 4;
}

hyphenate-limit-charsプロパティは、以下の3つの値を指定できる。

• <number> <number> <number>:
  • 最初の値は、ハイフネーションを許可する単語の最小文字数
  • 2つ目の値は、ハイフン前の最小文字数
  • 3つ目の値は、ハイフン後の最小文字数
• <number> <number>:
  • 最初の値は、ハイフネーションを許可する単語の最小文字数
  • 2つ目の値は、ハイフン前後の最小文字数
• <number>:
  • ハイフネーションを許可する単語の最小文字数

デモ