【超解説】HTML/CSSで長い単語をきれいに折り返す

2024-04-02

DIV要素内で長い単語を強制的に改行する方法

word-break プロパティは、長い単語をどのように折り返すかを指定するために使用されます。以下の値を設定できます。

normal: 単語は折り返されません。
break-all: 単語は任意の位置で折り返されます。
break-word: 単語はハイフンで区切って折り返されます。
keep-all: 単語は折り返されず、次の行に移動されます。

例えば、以下のコードでは、div 要素内のすべての単語が、ハイフンで区切って折り返されます。

<div style="word-break: break-word;">
  This is a very long word that will be hyphenated and broken across multiple lines.
</div>

white-space プロパティは、要素内の空白文字の処理方法を指定するために使用されます。以下の値を設定できます。

normal: 空白文字は通常通りに表示されます。
nowrap: 空白文字は無視され、単語は連続して表示されます。
pre: 空白文字はすべて表示されます。
pre-wrap: 空白文字は通常通りに表示されますが、長い単語は折り返されます。

<div style="white-space: pre-wrap;">
  This is a very long word that will be wrapped across multiple lines.
</div>

hyphens プロパティは、単語の自動ハイフネーションを制御するために使用されます。以下の値を設定できます。

none: 単語は自動的にハイフネーションされません。
manual: 単語は手動でハイフネーションする必要があります。

<div style="hyphens: auto;">
  This is a very long word that will be automatically hyphenated.
</div>

 エンティティは、単語内に強制的にハイフンを挿入するために使用されます。

例えば、以下のコードでは、supercalifragilisticexpialidocious という単語は、 エンティティによって 2 つの部分に分割され、改行されます。

<div>
  This is a very long word: supercalifragilisticexpialidocious&shy;.
</div>

これらの方法を組み合わせることで、DIV要素内で長い単語を柔軟に折り返すことができます。

補足

上記の方法は、ブラウザによって互換性が異なる場合があります。
長い単語を頻繁に折り返す必要がある場合は、word-break: break-all; を設定するのが最も簡単です。
見た目を重視する場合は、hyphens: auto; を設定するのがおすすめです。
特定の単語のみを折り返したい場合は、 エンティティを使用するのが便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>長い単語の改行サンプル</title>
  <style>
    /* 方法 1: word-break プロパティ */
    .example-1 {
      word-break: break-word;
    }

    /* 方法 2: white-space プロパティ */
    .example-2 {
      white-space: pre-wrap;
    }

    /* 方法 3: hyphens プロパティ */
    .example-3 {
      hyphens: auto;
    }

    /* 方法 4: &shy; エンティティ */
    .example-4 {
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <h1>長い単語の改行サンプル</h1>

  <h2>方法 1: word-break プロパティ</h2>
  <p class="example-1">
    これは非常に長い単語です。この単語はハイフンで区切って、複数の行に折り返されます。
  </p>

  <h2>方法 2: white-space プロパティ</h2>
  <p class="example-2">
    これは非常に長い単語です。この単語は空白文字で区切って、複数の行に折り返されます。
  </p>

  <h2>方法 3: hyphens プロパティ</h2>
  <p class="example-3">
    これは非常に長い単語です。この単語は自動的にハイフネーションされて、複数の行に折り返されます。
  </p>

  <h2>方法 4: &shy; エンティティ</h2>
  <p class="example-4">
    これは非常に長い単語です。この単語は&shy;エンティティによって分割されて、複数の行に折り返されます。
  </p>
</body>
</html>

このコードを実行すると、ブラウザ上で長い単語がどのように折り返されるかを確認できます。

実行結果

DIV要素内で長い単語を強制的に改行するには、いくつかの方法があります。それぞれの方法の特徴を理解して、目的に合った方法を選択してください。

anywhere: テキストは任意の位置で折り返されます。

<div style="overflow-wrap: anywhere;">
  This is a very long word that will be wrapped anywhere.
</div>

clip: テキストは要素の境界線で切り取られます。
ellipsis: テキストは省略記号 (...) で置き換えられます。

<div style="text-overflow: ellipsis;">
  This is a very long word that will be replaced with ellipsis.
</div>

flexbox レイアウトは、要素を柔軟に配置するためのレイアウトシステムです。flex-wrap プロパティを使用することで、要素内の長い単語を自動的に折り返すことができます。

<div style="display: flex; flex-wrap: wrap;">
  This is a very long word that will be automatically wrapped.
</div>

JavaScriptを使用することで、DIV要素内の長い単語をプログラムで折り返すことができます。

例えば、以下のコードは、div 要素内のすべての単語を、word-break プロパティを使用して強制的に改行します。

const div = document.querySelector('div');
const words = div.textContent.split(' ');

for (const word of words) {
  word.style.wordBreak = 'break-all';
}