• Home
  • Web制作
  • CSSのword-breakを使いこなそう！思い通りの折り返しを実現する徹底ガイド

CSSのword-breakを使いこなそう！思い通りの折り返しを実現する徹底ガイド

schedule
Tags: CSS

はじめに：word-breakとは？

Webページを作成する上で、テキストの折り返しは避けては通れない課題の一つです。特に、長い単語やURLを含むテキストの場合、レイアウトが崩れてしまうことがあります。

そんな悩みを解決してくれるのが、CSSのword-breakプロパティです。word-breakを使用することで、単語の途中で折り返しを許可したり、特定の場所で強制的に改行したりすることができます。

本記事では、word-breakの基本的な使い方から、様々な使用例、そして注意点まで詳しく解説していきます。

word-breakの基本：3つの値とその効果

word-breakプロパティには、主に以下の3つの値を設定できます。

  1. normal: ブラウザ標準の折り返しルールに従います。
  2. break-all: 単語の途中で強制的に折り返します。長い単語やURLを含む場合に有効です。
  3. keep-all: 単語の途中で折り返しません。東アジアの言語のように、単語の途中で折り返すと意味が通じなくなる場合に適しています。

それぞれの値の効果を、具体的な例を交えながら見ていきましょう。

例1：normalの場合

これはword-break: normal; が適用されたテキストです。abcdefghijklmnopqrstuvwxyz

<p>これはword-break: normal; が適用されたテキストです。abcdefghijklmnopqrstuvwxyz</p>

normalは初期値であり、ブラウザ標準の折り返しルールに従います。多くの場合、単語の切れ目で折り返されますが、長い単語は要素の幅を超えてはみ出してしまうことがあります。

例2：break-allの場合

これはword-break: break-all; が適用されたテキストです。abcdefghijklmnopqrstuvwxyz

<p class="break-all">これはword-break: break-all; が適用されたテキストです。abcdefghijklmnopqrstuvwxyz</p>

.break-all {
  word-break: break-all;
}

break-allを適用すると、単語の途中でも強制的に折り返されるため、長い単語やURLを含む場合でも、要素の幅に収まるように表示されます。

例3：keep-allの場合

これはword-break: keep-all; が適用されたテキストです。abcdefghijklmnopqrstuvwxyz

<p class="keep-all">これはword-break: keep-all; が適用されたテキストです。abcdefghijklmnopqrstuvwxyz</p>

.keep-all {
  word-break: keep-all;
}

keep-allを適用すると、単語の途中で折り返されなくなります。日本語や中国語など、単語の途中で折り返すと意味が通じなくなる言語に適しています。

word-breakを使いこなす：様々な使用例

word-breakプロパティは、以下のような場面で特に役立ちます。

  • 長い単語やURLを含むテキスト
  • 表組み内のセル
  • レスポンシブデザイン

具体的な使用例を見ていきましょう。

例4：長い単語やURLを含むテキスト

ニュースサイトの見出しやブログ記事など、長い単語やURLを含むテキストは、word-break: break-all;を設定することで、レイアウトが崩れるのを防ぐことができます。

.article-title {
  word-break: break-all;
}

例5：表組み内のセル

表組み内のセルに長い単語が含まれる場合、word-break: break-all;を設定することで、セルの幅を超えてはみ出すのを防ぎ、見やすくすることができます。

table td {
  word-break: break-all;
}

例6：レスポンシブデザイン

スマートフォンやタブレットなど、画面サイズが異なるデバイスに対応するために、レスポンシブデザインは欠かせません。word-breakプロパティをメディアクエリと組み合わせることで、画面サイズに応じて折り返しルールを変更することができます。

/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  .article-title {
    word-break: break-all;
  }
}

word-break使用時の注意点

word-breakは便利なプロパティですが、使用時には以下の点に注意が必要です。

  • 日本語や中国語などのテキストでは、break-allを使用すると、不自然な場所で折り返されてしまう可能性があります。
  • keep-allを使用する場合でも、ブラウザやフォントによっては、意図したとおりに表示されないことがあります。

まとめ：word-breakをマスターして美しいWebページ作りを！

本記事では、CSSのword-breakプロパティについて、基本から応用まで解説してきました。word-breakは、テキストの折り返しを制御することで、Webページのレイアウトを美しく保つために欠かせないプロパティです。

本記事を参考に、word-breakを使いこなして、より洗練されたWebページ作りを目指しましょう！

関連記事