公開日: 2025-05-08
タグ: CSS
著者: ダーシノ(@bc_rikko)

hyphensプロパティが効かないときの対処法

hyphenate-limit-charsでハイフネーションされる文字数を制御するの記事を書いているときに、hyphensプロパティを使ってもハイフネーションされないことがあった。

可能性1: lang属性が正しくない

先述の問題は、lang属性が正しくないことが原因だった。

lang属性がjaになっていると英単語がハイフネーションされないため、正しい言語（en）を指定する必要がある。

<html lang="en">
  <p>juxtaposition and acknowledgement</p>
</html>

または

<html lang="ja">
  <section lang="en">
    <p>juxtaposition and acknowledgement</p>
  </section>
</html>

可能性2: 改行制御プロパティを使っている

white-space: nowrapやoverflow: hiddenなど、改行を制御するプロパティを使っている場合にハイフネーションが効かない。

<html lang="en">
  <p style="white-space: nowrap">juxtaposition and acknowledgement</p>
  <p style="white-space: normal">juxtaposition and acknowledgement</p>
</html>