CSS｜overflow-wrap・word-wrap・word-break テキストの改行ルール

ホームページ（ウェブサイト）を制作し、運用していく中で、テキストの折り返しや改行の制御は非常に重要です。特にスマートフォンでの閲覧が主流となっている現在、長いURLや英単語が画面の幅を超えてはみ出してしまう「レイアウト崩れ」は、ユーザーの利便性を大きく損なう原因になります。画面を横にスクロールしなければ文章が読めない状態は、訪問者に強いストレスを与え、結果として直帰率の悪化など、検索エンジンからの評価を下げる要因にもつながるかもしれません。

このレイアウト崩れを防ぎ、美しく読みやすいテキスト表示を実現するために用意されているCSSプロパティが、「overflow-wrap」「word-wrap」「word-break」の3つです。

テキストの改行ルールは、日本語や英語などの言語によってブラウザの初期設定が異なります。日本語の場合は基本的に文字ごとに改行されますが、英語の場合は単語の途中で改行されず、単語の切れ目（スペースやハイフン）で改行されるという特徴を持ちます。そのため、スペースを含まない長いURLや連続した英文字列が本文内に存在すると、スマートフォンのような画面幅の狭いデバイスでは、画面の外にテキストがはみ出してしまう現象が起こります。

これを解決するために、かつては「word-wrap」というプロパティが頻繁に使われていました。このword-wrapは、元々特定のブラウザ向けに作られた拡張機能でしたが、非常に実用的であったため現在ではCSSの標準規格として採用され、名前を「overflow-wrap」と改めて定義されています。つまり、overflow-wrapとword-wrapは基本的に全く同じ役割を持っています。

一方で、「word-break」は少し異なるアプローチでテキストの改行を制御します。単語の途中で強制的に改行させるか、あるいは日本語などの言語において、あえて単語の途中での改行を禁止するかなど、文字の区切り方そのものに介入するプロパティです。

この記事では、以前からあるword-wrapやword-breakの仕様を整理して統合しつつ、新しく標準となったoverflow-wrapを中心に、それぞれのプロパティの具体的な違いや、事業用のホームページ（ウェブサイト）制作の現場でどのように使い分けるべきかを詳しく解説していきます。適切な改行指定を行うことで、ユーザーにとって読みやすく、検索エンジンのクローラーにも正しく情報を伝えられる高品質なページ構成を実現していきましょう。

overflow-wrapの基本と活用方法

overflow-wrapは、単語が長すぎて要素の枠（コンテナ）からはみ出してしまう場合に、ブラウザがどのように改行を処理するかを指定するためのCSSプロパティです。テキストのはみ出しを防ぎ、美しいレイアウトを維持するための最も基本となる指定項目と言えます。

overflow-wrapとword-wrapの歴史的な背景

もともと、長い文字列を折り返すためのプロパティとして「word-wrap」が広く知られていました。これは初期のインターネットエクスプローラーが独自に実装したものでしたが、レイアウト崩れを防ぐ上で非常に有用であったため、他のブラウザも追随してサポートするようになりました。その後、CSSの標準規格として正式に採用されるにあたり、機能の実態に合わせてプロパティ名が「overflow-wrap」へと変更されました。現在でも互換性を保つためにword-wrapは機能しますが、より専門的には、今後の標準であるoverflow-wrapを使用することが推奨されています。

overflow-wrap: break-wordの挙動

overflow-wrapプロパティに「break-word」を指定すると、通常は改行されない長い英単語やURLであっても、要素の幅に合わせて強制的に改行されるようになります。ここで重要なのは、単語の途中で改行されるのは「要素の幅に収まりきらない場合のみ」という点です。短い単語であれば通常の単語の切れ目で改行されるため、英語の文章としての読みやすさを損なうことなく、レイアウトのはみ出しだけを安全に防止できます。

word-breakの役割と指定方法

word-breakは、文字列のどこで改行を行うか、その区切り方のルール自体を指定するためのプロパティです。overflow-wrapが「はみ出す場合の緊急措置」として働くのに対し、word-breakはテキスト全体の改行規則そのものに影響を与えます。

word-break: break-allの効果

値に「break-all」を指定すると、言語の種類を問わず、要素の右端に到達した時点で強制的に改行が行われます。英語の文章であっても単語の途中で容赦なく改行されるため、レイアウトのはみ出しは確実に防ぐことができます。しかし、英単語が分断されるため、英語圏のユーザーにとっては非常に読みにくい文章になってしまう可能性があります。日本語が中心のホームページ（ウェブサイト）において、長いURLなどを確実に折り返したい場合に限定して使用するのが安全です。

word-break: keep-allの活用

値に「keep-all」を指定すると、日本語や中国語などのアジア圏の言語においても、英語のように「単語の途中では改行しない」という挙動になります。日本語の文章では不自然な空白ができやすいため、本文全体に適用することはあまりありません。しかし、大きな見出しなどで「特定の単語の途中で不自然に改行されるのを防ぎたい」という場面で効果を発揮します。

最適な改行指定によるレイアウト設計

これまで解説したプロパティをどのように組み合わせるかが、高品質なホームページ（ウェブサイト）を構築するためのポイントになります。閲覧するユーザーの多様なデバイス環境を想定し、意図しない崩れを未然に防ぐ設定を行っていきます。

overflow-wrapをベースにした設定

現代のWeb制作において、最も推奨されるベースの設定は「overflow-wrap: break-word」を適用することです。これにより、英語の自然な読みやすさを維持しつつ、スマートフォンのような幅の狭い画面での長いURLのはみ出しなどを防ぐことができます。まずはこの設定を全体に適用し、必要に応じて局所的に他のプロパティで微調整を行っていく設計がスマートです。

コンテンツの性質に合わせた調整

日本語のテキストが主体であり、ユーザー投稿などでどのような文字列が入力されるか予測できないようなシステムや掲示板などでは、「word-break: break-all」を指定して確実にはみ出しを防ぐという選択肢もあります。扱う事業の内容や、ホームページのターゲット層、掲載するコンテンツの言語比率などを総合的に考慮して、最適なCSSプロパティを選定してください。

word-wrap（ワードラップ）

word-wrap: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「word-wrap」についてのご説明です。

ホームページ制作・作成において、word-wrap（ワードラップ）は、単語の途中改行を指定します。

word-wrap 単語の途中改行を指定（IE）

word-wrapは、ページ中のテキストデータの表示において、表示範囲内に収まりきらない単語がある場合に、単語を途中改行するかを指定します。ワードラップ。

normal

単語の途中で改行しない（必要に応じて表示範囲を拡大）

break-word

必要に応じ、単語の途中で改行

word-wrapの現代的な立ち位置とoverflow-wrapへの移行

CSSプロパティ「word-wrap」は、もともとInternet Explorerが独自に実装した拡張プロパティとして広まりました。現在でもほぼすべての主要なブラウザでサポートされていますが、より専門的には、ウェブ標準の仕様として新しく定義された「overflow-wrap」という名称を使用することが推奨されています。実質的な機能は同じですが、新しくホームページ（ウェブサイト）を制作・改修する際は、将来的な互換性を考慮してoverflow-wrapで記述していくのが安心です。

このプロパティの最大の目的は、指定した表示領域（ボックス）からテキストがはみ出してしまうのを防ぐことです。ユーザーが入力した長文のコメントや、途中に空白を持たない長いURLなどが表示される場面で非常に役立ちます。これらが枠からはみ出してしまうと、事業用のホームページにおいてユーザーに意図しない横スクロールを強いることになり、閲覧のストレスを大きく高めてしまいます。

word-breakとの決定的な違いとモバイル対応での効果

テキストの改行を制御する似たプロパティとしてword-breakがありますが、両者の挙動には明確な違いがあります。word-break（特にbreak-allを指定した場合）は、単語の途中であっても画面の端に到達した時点で強制的に改行を行います。

一方、word-wrap（overflow-wrap）に「break-word」を指定した場合、まずは単語の切れ目など自然な位置での改行を試みます。それでもどうしても領域に収まりきらない、極端に長い単語やURLが登場した時にだけ、例外的に単語の途中で折り返し処理を行います。つまり、文章全体の読みやすさをできる限り維持しながら、レイアウトの崩れだけをピンポイントで防ぐことができる使い勝手の良い設定と言えます。

スマートフォンの普及により、狭い画面でのテキスト表示の最適化は、検索エンジンが評価するモバイルフレンドリーの重要な指標となっています。ユーザーの離脱を防ぎ、集客効果を高めるためにも、予期せぬレイアウト崩れに対する安全網として、このプロパティを適切に組み込んでおくことが重要です。

word-wrap: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作でデザイン性を考える際に問題の一つとなるのがテキストデータの表示のされ方です。フォント種類やブラウザ解像度などの影響で段落のテキストが段落ちすることがあります。こうした時に美しく整形するためには、このようなプロパティを使用します。

ブラウザごとにCSSの解釈が異なる点が、ホームページ制作と紙の広告物作成との違いのひとつと言えるでしょう。

word-break（ワードブレイク）

word-break: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「word-break」についてのご説明です。

ホームページ制作・作成において、word-break（ワードブレイク）は、テキスト（文）の改行方法を指定します。

word-break 文の改行方法を指定（IE）

CSSプロパティのword-breakは、ページ中のテキストデータの表示において、文の改行方法を指定します。ワードブレイク。

word-break : normal

日本語などは、表示範囲に合わせて改行
英語などは、単語の切れ目で改行 ノーマル

word-break : break-all

言語に関係なく表示範囲に合わせて改行 ブレイクオール

word-break : keep-all

言語に関係なく単語の切れ目で改行 キープオール

スマートフォン環境におけるテキストレイアウトの最適化

現代のホームページ（ウェブサイト）制作において、スマートフォンからのアクセスを想定した設計は基本中の基本です。画面幅の狭いモバイル環境では、長い英単語やURLなどが一行に収まりきらず、画面の横にはみ出してしまう現象が頻繁に起こります。横スクロールが発生してしまうと、ユーザーの閲覧ストレスが高まるだけでなく、検索エンジンが推奨するモバイルフレンドリーの基準を満たさなくなり、結果的に集客に悪影響を及ぼす可能性があります。

こうした意図しないレイアウト崩れを防ぐために、word-breakプロパティが非常に重要です。例えば、ユーザーが投稿した長文のコメントや、参照元の長いURLリンクなどを表示する領域にあらかじめ「word-break: break-all;」を設定しておくことで、画面の端に到達した時点で強制的にテキストを折り返し、レイアウトの破綻を未然に防ぐことができます。

可読性とoverflow-wrapとの使い分け

ただし、強制的な折り返しを多用すると、英単語の途中で不自然に改行されてしまい、かえって文章が読みにくくなるケースがあります。事業として情報を正確に伝えるためには、単に画面に収めるだけでなく、ユーザーにとっての読みやすさ（可読性）も同時に考慮しなければなりません。

より専門的には、word-breakと似た役割を持つ「overflow-wrap（旧word-wrap）」というプロパティと状況に応じて使い分ける手法が一般的です。overflow-wrapプロパティに「break-word」を指定すると、基本的には単語の切れ目で自然な改行を維持しつつ、どうしても画面幅に収まらない極端に長い単語だけを途中で折り返してくれます。

ホームページ全体には自然な改行ルールを適用しつつ、表の中のテキストやURLを表示する特定の枠に対してのみ強制的な折り返しを適用するなど、細やかなCSS設計を行うことが大切です。こうした細部への配慮が、ユーザーの滞在時間を延ばし、最終的なお問い合わせや成約につながる質の高いホームページを作り上げていきます。

word-break: ;

ホームページ制作・Webデザインの1ポイント

PC表示であれば問題のない段落であっても、モバイルフレンドリー化した際などにスマートフォンの画面ではテキストの文の改行箇所がPC表示と異なるケースがあります。ホームページ制作時にCSSである程度の整形を予め設定しておくと、違和感のないテキスト段落へと仕上がります。

なお、ホームページの表示デバイスの違いも含めて表示フォントや余白など、ブラウザごとに若干テキスト表示の取り扱いに違いがあるため、ある程度の差異は予め受け入れておく必要があります。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法