概要

word-wrap（現在はoverflow-wrap）は、CSSでテキストの折り返しを制御するプロパティです。長い単語や文章がコンテナの幅を超えたときに、どう表示するかを指定することができます。これを活用することで、テキストの読みやすさを維持し、デザインの整合性を保つことができます。この記事では、word-wrap（overflow-wrap）の使い方と、その効果的な利用方法について詳しく解説します。

基本的な使い方

overflow-wrapプロパティは、テキストがコンテナの幅を超える場合に、単語を折り返すかどうかを決定します。従来はword-wrapと呼ばれていましたが、現在はoverflow-wrapが正式なプロパティ名となり、word-wrapはそのエイリアスとして使用されています。

構文

.element {
  overflow-wrap: normal; /* または break-word */
}
  • normal（デフォルト）：単語の途中での折り返しを行わず、通常の折り返し規則に従います。
  • break-word：必要に応じて単語の途中で折り返し、コンテナ内に収めます。

例

以下は、overflow-wrapを使用して長い単語を折り返す例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Wrap Example</title>
<style>
  .container {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  .normal-wrap {
    overflow-wrap: normal;
    border: 1px solid #007bff;
    margin-bottom: 10px;
    padding: 5px;
  }
  .break-word {
    overflow-wrap: break-word;
    border: 1px solid #28a745;
    padding: 5px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="normal-wrap">
    これは長い単語がコンテナからはみ出している例です: Supercalifragilisticexpialidocious
  </div>
  <div class="break-word">
    これは長い単語が折り返される例です: Supercalifragilisticexpialidocious
  </div>
</div>
</body>
</html>

このコードでは、.normal-wrapクラスの要素では折り返しが行われず、長い単語がはみ出してしまいます。一方、.break-wordクラスの要素ではoverflow-wrap: break-word;が指定されているため、長い単語が適切に折り返され、コンテナ内に収まります。

overflow-wrapの利点

  • レイアウトの崩れ防止: 長い単語やURLなどがコンテナの幅を超えてしまう場合、折り返しによってレイアウトの崩れを防ぐことができます。
  • 読みやすさの向上: テキストがコンテナに収まることで、読みやすさが向上し、ユーザーエクスペリエンスが改善されます。
  • レスポンシブデザインに最適: スクリーンサイズに応じたテキスト表示を簡単に管理できるため、レスポンシブなデザインに効果的です。

応用例

長いURLの折り返し

ウェブページにおいて、長いURLがコンテナからはみ出してしまうことがあります。これをoverflow-wrapで解決する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Wrap with URL</title>
<style>
  .url-container {
    width: 250px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-wrap: break-word;
  }
</style>
</head>
<body>
<div class="url-container">
  こちらは長いURLの例です: https://www.example.com/this-is-a-very-long-url-that-would-normally-overflow
</div>
</body>
</html>

この例では、長いURLがoverflow-wrap: break-word;によって折り返され、コンテナの中に収まっています。これにより、レイアウトが乱れることなく、見た目が整います。

日本語のテキストにおける折り返し

日本語では単語間のスペースがないため、overflow-wrapを設定しておくことで、長文でも見た目を整えることができます。

p {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-wrap: break-word;
}

この設定により、日本語の文章がコンテナ内で適切に折り返され、視覚的に美しい状態を保ちます。

まとめ

overflow-wrap（word-wrap）は、テキストの折り返しを簡単に制御できる便利なCSSプロパティです。特に、長い単語やURLが含まれる場合にレイアウトを保つために役立ちます。視覚的な美しさとユーザーの読みやすさを向上させるために、ぜひ活用してみてください。

参照:

overflow-wrap - MDN Web Docs