word-break: break-all と word-wrap: break-word の徹底比較

2024-04-02

CSSにおける word-break: break-all と word-wrap: break-word の違い

word-break と word-wrap は、長い単語やURLが要素の幅を超えた場合の処理を制御する CSS プロパティです。それぞれ異なる動作をするため、状況に応じて使い分けることが重要です。

word-break: break-all

長い単語を文字単位で分割し、要素の幅内に収まるように改行します。
日本語のような非アルファベット言語でも有効です。
ハイフン (-) やアンダーバー (_) などの記号を含む単語も分割されます。
見た目が崩れる可能性があるため、注意が必要です。

見た目を崩さずに長い単語を扱いたい場合に有効です。

比較表

プロパティ	対象	分割方法	注意点
`word-break: break-all`	全ての単語	文字単位	見た目が崩れる可能性がある
`word-wrap: break-word`	英単語のみ	単語単位	日本語には影響しない

使用例

長いURLを要素内に収めたい場合は word-break: break-all を使用します。
見た目を崩さずに長い英単語を扱いたい場合は word-wrap: break-word を使用します。

補足

word-wrap: break-word は CSS3 で導入されたプロパティです。
word-break は break-all 以外にも break-word や keep-all などの値を設定できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>word-break と word-wrap のサンプル</title>
  <style>
    .container {
      width: 200px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .break-all {
      word-break: break-all;
    }
    
    .break-word {
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class="container">
    これは非常に長いURLです: https://www.example.com/this/is/a/very/long/url/that/needs/to/be/wrapped/to/fit/within/the/container
  </div>
  
  <div class="container break-all">
    これは非常に長いURLです: https://www.example.com/this/is/a/very/long/url/that/needs/to/be/wrapped/to/fit/within/the/container
  </div>
  
  <div class="container break-word">
    これは非常に長いURLです: https://www.example.com/this/is/a/very/long/url/that/needs/to/be/wrapped/to/fit/within/the/container
  </div>
</body>
</html>

上記のコードは、word-break: break-all と word-wrap: break-word の動作を示すサンプルです。
3つの .container 要素があり、それぞれ異なるプロパティを設定しています。
1つ目の .container 要素は、長いURLが要素の幅を超えて表示されます。
2つ目の .container 要素は、word-break: break-all を設定することで、長いURLが文字単位で分割され、要素の幅内に収まるように改行されます。

長い単語を折り返すその他の方法

hyphens プロパティは、単語の途中でハイフン (-) を挿入することで、長い単語を折り返すことができます。

.container {
  hyphens: auto;
}

white-space プロパティは、単語の間隔を制御することで、長い単語を折り返すことができます。

.container {
  white-space: nowrap;
}

overflow プロパティは、要素の内容が溢れた場合の処理を制御することで、長い単語を折り返すことができます。

.container {
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript を使用して、長い単語を検出して折り返すこともできます。

const elements = document.querySelectorAll('.container');

elements.forEach((element) => {
  const text = element.textContent;
  const words = text.split(' ');

  words.forEach((word) => {
    if (word.length > 20) {
      element.innerHTML = element.innerHTML.replace(word, `${word.slice(0, 20)}-<br>${word.slice(20)}`);
    }
  });
});