Webデザイン

【PR】を含みます。

【CSS】テキストの折り返しを指定する方法

CSS テキストの折り返しを指定する方法

テキストの折り返しを適切に設定することで、可読性を保ちながらデザインを整えることができます。

本記事では、CSSを使用してテキストの折り返しを指定する方法について詳しく解説します。

white-spaceプロパティで折り返しを制御

white-spaceプロパティは、テキスト内の空白や改行をどのように扱うかを指定するプロパティです。

white-spaceの主な値

normal
デフォルト
テキストは通常通り折り返され、連続した空白は1つにまとめられます。
nowrap
テキストを折り返さずに1行で表示します。
pre
改行や空白をそのまま保持します（プレーンテキストのような表示）。
pre-wrap
空白と改行を保持しつつ、コンテナの幅を超えた場合は折り返します。
pre-line
改行は保持しますが、連続する空白は1つにまとめます。

white-spaceの折り返し・空白・改行の扱いまとめ

値折り返し空白改行
normalするまとめる無視
nowrapしないまとめる無視
preしない保持保持
pre-wrapする保持保持
pre-lineするまとめる保持

【使用例1】normal（デフォルト）

空白が連続した場合は1つにまとめられ、コンテナの幅を超える場合は折り返されます。

以下のコードは、連続する空白を1つにまとめ、コンテナの幅を超えると自動的に折り返します。

HTML
Copy
  1. <div class="example-normal">
  2.   このテキストは デフォルトの  設定です。
  3. </div>
CSS
Copy
  1. .example-normal {
  2.   white-space: normal;
  3. }

【使用例2】nowrap

テキストを1行に表示し、折り返しを無効にします。

連続する空白は1つにまとめられます。

以下のコードは、テキストはコンテナの幅を超えても折り返されず、1行で表示されます。

HTML
Copy
  1. <div class="example-nowrap">
  2.   このテキストは 折り返されずに  1行で表示されます。
  3. </div>
CSS
Copy
  1. .example-nowrap {
  2.   white-space: nowrap;
  3. }

【使用例3】pre

テキスト内の改行や空白をそのまま保持して表示します。

プレーンテキストのような表現が可能です。

以下のコードは、HTML内に入力された通りに空白や改行がそのまま表示されます。

HTML
Copy
  1. <div class="example-pre">
  2.   このテキストは
  3.   空白と  改行を
  4.   そのまま保持します。
  5. </div>
CSS
Copy
  1. .example-pre {
  2.   white-space: pre;
  3. }

【使用例4】pre-wrap

空白や改行は保持されますが、幅を超える場合には折り返されます。

以下のコードは、preのように空白と改行を保持しながらも、テキストがコンテナの幅を超えると自動で折り返します。

HTML
Copy
  1. <div class="example-pre-wrap">
  2.   このテキストは
  3.   空白と  改行を保持しつつ、
  4.   コンテナの幅を超えると折り返されます。
  5. </div>
CSS
Copy
  1. .example-pre-wrap {
  2.   white-space: pre-wrap;
  3. }

【使用例5】pre-line

改行は保持されますが、連続する空白は1つにまとめられます。

コンテナの幅を超えると折り返されます。

以下のコードは、改行はそのまま表示されますが、空白は連続しても1つにまとめられます。

HTML
Copy
  1. <div class="example-pre-line">
  2.   このテキストは
  3.   改行を保持しますが、  連続する空白は
  4.   1つにまとめられます。
  5. </div>
CSS
Copy
  1. .example-pre-line {
  2.   white-space: pre-line;
  3. }

word-breakプロパティで折り返しを制御

word-breakプロパティは、テキスト内の単語をどのように折り返すかを指定するCSSプロパティです。

特に、長い単語やURLがコンテナからはみ出る場合に役立ちます。

このプロパティを使うことで、テキストの表示をより柔軟に制御できます。

word-breakの主な値

normal
デフォルト
単語がコンテナの幅を超える場合は折り返すが、単語の途中では折り返しません。
break-all
長い単語やURLを含む場合、単語を途中で折り返します。
keep-all
アジア言語のテキストで、単語を途中で折り返したくない場合に使用します。
英語は折り返します。

【使用例1】normal（デフォルト）

単語がコンテナの幅を超えても、スペースやハイフンがない限り改行されません。

その結果、テキストがコンテナからはみ出すことがあります。

HTML
Copy
  1. <div class="example-normal">
  2.   ThisIsAReallyLongWordThatWillNotBreakEasily
  3. </div>
CSS
Copy
  1. .example-normal {
  2.   word-break: normal;
  3. }

【使用例2】break-all

長い単語が途中で折り返され、文字単位ごとに改行が許可されます。

コンテナの幅を超えないように文字が調整されるため、表示が崩れにくくなります。

特に長い単語やURLを含む場合に便利です。

HTML
Copy
  1. <div class="example-break-all">
  2.   ThisIsAReallyLongWordThatWillBreakAnywhere
  3. </div>
CSS
Copy
  1. .example-break-all {
  2.   word-break: break-all;
  3. }

【使用例3】keep-all

日本語や中国語などのアジア言語に適しています。

英語の単語は通常通り折り返されますが、日本語の単語は途中で折り返しされません。

HTML
Copy
  1. <div class="example-keep-all">
  2.   これはとても長い日本語の文章です。折り返しが許可されません。
  3. </div>
CSS
Copy
  1. .example-keep-all {
  2.   word-break: keep-all;
  3. }

overflow-wrapプロパティで折り返しを制御

overflow-wrapプロパティは、テキストの内容がコンテナの幅を超える場合に、単語の途中で折り返しを許可するかどうかを制御するCSSプロパティです。

特に、長い単語やURLがコンテナからはみ出さないように表示したい場合に役立ちます。

以前はword-wrapというプロパティ名で使用されていましたが、現在ではoverflow-wrapが推奨されています。

overflow-wrapの主な値

normal
デフォルト
単語全体を折り返さないため、コンテナからはみ出す可能性があります。
break-word
長い単語がコンテナの幅を超える場合、途中で折り返します。

【使用例1】normal（デフォルト）

単語全体がコンテナの幅を超える場合でも、単語の途中で折り返しません。

つまり、通常の折り返しルールに従います。

HTML
Copy
  1. <div class="example-normal">
  2.   ThisIsAVeryLongWordThatWillNotBreakUnlessItReachesTheEnd
  3. </div>
CSS
Copy
  1. .example-normal {
  2.   overflow-wrap: normal;
  3. }

【使用例2】break-word

単語全体がコンテナの幅を超える場合、単語の途中で折り返しが行われます。

これにより、単語が長すぎてコンテナからはみ出るのを防ぎます。

HTML
Copy
  1. <div class="example-break-word">
  2.   ThisIsAVeryLongWordThatWillBreakIfItExceedsTheWidth
  3. </div>
CSS
Copy
  1. .example-break-word {
  2.   overflow-wrap: break-word;
  3. }

overflow-wrap: break-word; と word-break: break-all; の違い

overflow-wrap: break-word;は、単語が収まりきらない場合に折り返します。

テキストが単語単位で折り返されるのを維持したいが、長い単語やURLがコンテナからはみ出るのを防ぎたい場合に使用します。

word-break: break-all;は、単語が途中でも強制的に折り返します。

break-allは強制的に折り返しを行うため、読みやすさよりも表示を優先したい場合に適しています。

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-Webデザイン
-,