CSS word-wrap プロパティと overflow-wrap プロパティの違い

CSS word-wrapping in div

CSSの word-wrap プロパティは、長い単語が要素の幅を超えた時にどのように折り返すかを制御します。これは、長い単語が画面からはみ出してしまうのを防ぎ、読みやすさを向上させるために役立ちます。

使い方

word-wrap プロパティは、以下の値を指定できます。

• normal: 単語は折り返されません。
• break-word: 長い単語は、ハイフンで分割して折り返されます。
• initial: 初期値。ブラウザのデフォルト設定に従います。

例

<div style="width: 200px;">
  これは非常に長い単語です。
</div>

上記のコードでは、div 要素の幅は 200px に設定されています。そのため、「非常に長い単語」という単語は、要素の幅を超えて画面からはみ出してしまいます。

div {
  word-wrap: break-word;
}

上記の CSS コードを追加すると、「非常に長い単語」という単語は、ハイフンで分割して次の行に折り返されます。

その他の注意点

• word-wrap プロパティは、white-space プロパティと併用して使用することができます。
• word-wrap プロパティは、すべてのブラウザでサポートされているわけではありません。

応用例

• 長いURLを折り返して表示する
• スマートフォンで読みやすい文章を作る

word-wrap プロパティは、長い単語が要素の幅を超えた時にどのように折り返すかを制御する便利なプロパティです。読みやすく、レイアウトを整えたい場合には、ぜひ活用してみてください。

CSS word-wrapping in div のサンプルコード

<div style="width: 200px;">
  これは非常に長い単語です。
</div>

div {
  word-wrap: break-word;
}

結果

これは非常に
-長い単語です。

サンプル2：長いURLを折り返す

<a href="https://www.example.com/this/is/a/very/long/url/path/to/a/file.html">
  https://www.example.com/this/is/a/very/long/url/path/to/a/file.html
</a>

a {
  word-wrap: break-word;
}

https://www.example.com/this/is/a/
very/long/url/path/to/a/file.html

<h1>
  これは非常に長い見出しです。
</h1>

h1 {
  word-wrap: break-word;
  max-width: 500px;
}

<h1>
  これは非常に
  長い見出しです。
</h1>

<p>
  これは長い文章です。スマートフォンで読みやすくするために、
  `word-wrap` プロパティを使って改行を制御します。
</p>

p {
  word-wrap: break-word;
}

@media (max-width: 768px) {
  p {
    font-size: 16px;
    line-height: 1.5;
  }
}

• スマートフォンでは、文章が読みやすいようにフォントサイズと行間が調整されます。

上記以外にも、word-wrap プロパティと white-space プロパティを組み合わせて、様々なレイアウトを作ることができます。詳しくは、以下の参考資料を参照してください。

word-wrap プロパティは、長い単語や文章をレイアウトする際に便利なプロパティです。様々なサンプルコードを参考に、使いこなしてみてください。

CSS word-wrapping in div の他の方法

white-space プロパティは、要素内の空白文字の処理方法を制御します。以下の値を指定できます。

• normal: 空白文字は通常通りに処理されます。
• pre: 空白文字はすべてそのまま表示されます。
• pre-wrap: 単語は折り返されますが、空白文字はすべてそのまま表示されます。

<div style="width: 200px;">
  これは非常に長い単語です。
</div>

div {
  white-space: nowrap;
}

これは非常に長い単語です。

overflow-wrap プロパティは、要素内のテキストがどのように折り返されるかを制御します。以下の値を指定できます。

• anywhere: 単語内でも折り返されます。

<div style="width: 200px;">
  これは非常に長い単語です。
</div>

div {
  overflow-wrap: anywhere;
}

これは
非常に
長い
単語
です。

hyphens プロパティは、単語の自動ハイフネーションを制御します。以下の値を指定できます。

• none: 自動ハイフネーションは行われません。
• manual: 単語に手動でハイフンを挿入することができます。

<div style="width: 200px;">
  これは非常に長い単語です。
</div>

div {
  hyphens: auto;
}

これは非常に-
長い単語です。

• left: テキストは左揃えされます。

<div style="width: 200px;">
  これは非常に長い単語です。
</div>

div {
  text-align: justify;
}

これは非常に長い単語です。

• break-all: 長い単語は、任意の位置で分割されます。

<div style="width: 200px;">
  これは非常に長い単語です。
</div>

div {
  word-break: break-all;
}

これは
非常に
長い
単語
です。

word-wrap プロパティ以外にも、様々な方法で長い単語や文章をレイアウトすることができます。これらの方法を組み合わせて、最適なレイアウトを実現してください。