CSSのhyphensで単語の途中改行を制御し、テキストの可読性を向上させる方法をわかりやすく解説

2024.09.14
スポンサーリンク

CSSのhyphensプロパティは、テキストのハイフネーション（単語を途中で区切って改行する）を制御するために使用されます。これにより、特に長い単語が含まれる場合でも、要素内にテキストが自然に収まるようにすることができます。以下に、主な値とその効果をリストで示し、詳細な解説と表示例を記載します。

スポンサーリンク

hyphensプロパティの値とその効果の一覧

  • hyphens: none;（デフォルト値） – ハイフネーションを行わず、単語が折り返されません。
  • hyphens: manual; – 手動で挿入されたハイフンのみが有効になります。
  • hyphens: auto; – ブラウザが自動的に単語の途中でハイフネーションを行います。

注意点や関連情報

hyphensプロパティは、主に長い単語が含まれる場合に便利ですが、使用する言語によってはブラウザがハイフネーションをサポートしていない場合もあります。autoを使用する場合でも、ブラウザのハイフネーションのサポートに依存します。

hyphensプロパティが効かない時の原因と対策

要素にwhite-space: nowrap;が適用されている

white-spaceプロパティがnowrapに設定されていると、テキストが改行されないため、hyphensプロパティが機能しません。この設定では、テキストが常に1行で表示されるため、ハイフネーションが行われません。
対策: 要素のwhite-spaceプロパティを確認し、必要に応じてwhite-space: normal;やwhite-space: pre-wrap;に変更します。これにより、テキストが改行されるようになり、hyphensプロパティの効果が確認できます。

overflowやword-wrapの影響

overflowプロパティやword-wrapプロパティ（overflow-wrap）がテキストの改行に影響を与えている場合、hyphensプロパティの効果が適用されないことがあります。特に、word-wrap: break-word;などが設定されていると、単語全体が無理やり改行され、ハイフネーションが行われないことがあります。
対策: word-wrapやoverflow-wrapプロパティがhyphensと競合していないか確認し、必要に応じて調整します。例えば、overflow-wrap: normal;やword-wrap: normal;を指定して、ハイフネーションを優先するように設定します。

フォントがハイフネーションをサポートしていない

一部のフォントは、特定のハイフネーションルールをサポートしていない場合があります。この場合、フォントが適切にハイフネーションを行わず、効果が見られないことがあります。
対策: 別のフォントを試してみて、ハイフネーションが適切に機能するか確認してください。特に、システムフォントやWebフォントでテストすることで、効果が確認できます。

共通するCSSコード

<style>
    .css-sample-container {
      width: 300px;
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }

    .css-sample-item {
      background-color: #cce7ff;
      border: 1px solid #99ccff;
      padding: 20px;
      text-align: left;
      word-wrap: break-word;
    }
  </style>

hyphens: none;（デフォルト値）

この値では、テキストの単語が途中でハイフネーションされることはなく、単語全体が一行に収まるまで折り返されません。長い単語がある場合、要素の幅を超えるとオーバーフローします。

HTMLコード

<div class="css-sample-container css-sample-hyphens-none">
    <div class="css-sample-item">
      Thisisaverylongwordthatwillnotbehyphenatedandwilloverflowifitstoolongtobecontained.
    </div>
  </div>

CSSコード

<style>
    .css-sample-hyphens-none {
      hyphens: none;
    }
  </style>

表示結果

Thisisaverylongwordthatwillnotbehyphenatedandwilloverflowifitstoolongtobecontained.

hyphens: manual;

この値では、手動で挿入されたハイフン（&shy;など）が有効になります。自動的にハイフネーションされることはありません。

HTMLコード

<div class="css-sample-container css-sample-hyphens-manual">
    <div class="css-sample-item">
      This­is­a­manually­hyphen­ated­word.
    </div>
  </div>

CSSコード

<style>
    .css-sample-hyphens-manual {
      hyphens: manual;
    }
  </style>

表示結果

This­is­a­manually­hyphen­ated­word.

hyphens: auto;

この値では、ブラウザが自動的に適切な位置でハイフネーションを行います。特に長い単語を含むテキストの整形に役立ちますが、言語やブラウザのサポートに依存します。

HTMLコード

<div class="css-sample-container css-sample-hyphens-auto">
    <div class="css-sample-item">
      Thisisaverylongwordthatmightbehyphe­na­tedbythebrowserauto­maticallyifit'stoolong.
    </div>
  </div>

CSSコード

<style>
    .css-sample-hyphens-auto {
      hyphens: auto;
    }
  </style>

表示結果

Thisisaverylongwordthatmightbehyphe­na­tedbythebrowserauto­maticallyifit’stoolong.

まとめ

  • hyphensプロパティは、単語の途中でハイフネーションを行うかどうかを制御します。
  • デフォルト値はnoneで、ハイフネーションは行われません。
  • manualは、手動でハイフネーションを挿入した場合にのみ有効です。
  • autoは、ブラウザが自動的にハイフネーションを行いますが、サポート状況に依存します。
スポンサーリンク