CSSでテキストを折り返しさせるには？word-breakとoverflow-wrapの違いについて解説

CSSでHTML内のテキストを折り返したいときがありますよね。

折り返しの指定ができるプロパティは複数あって分かりづらくありませんか？

今回は、CSSでHTMLテキストを折り返しをする方法をきちんと学びたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSでHTMLテキストの折り返しをする方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

CSSでテキストを折り返すには？2つのプロパティを紹介

CSSでは、要素の端で自動的にテキストが折り返しされます。

改行タグの<br>を使用することでも、折り返しがされますよね。

今回は、要素の端で自動的に折り返しされるときに、どのような条件で折り返しが行われるのか、また、その条件をどのように変えることができるのか、を紹介します。

テキストを折り返しする条件を指定するには、以下の2つのプロパティを使用します。

それぞれのプロパティについて、説明していきましょう。

overflow-wrap(word-wrap)について

word-wrapは、元々、Microsoft社の独自拡張機能でしたが、多くのブラウザで使用されるようになったことで、CSSの標準仕様になったプロパティです。

CSSの標準仕様では、overflow-wrapと名称を変更していますが、現在、word-wrapの方も問題なく使用できます。

一部のブラウザではoverflow-wrapがサポートされていないため、2つを併せて記述することが推奨されています。

ここでは、overflow-wrapの方を、説明していきますね。

overflow-wrapは、テキストが要素端に来たときに、単語の途中で折り返しするかどうかを指定します。

指定できる値は、次の2つです。

normalは、初期値です。何も設定していない場合は、この値の挙動になります。

日本語の場合は、要素幅に合わせてテキストが折り返しされます。

英語の場合は、単語の切れ目で折り返しされます。長い単語の場合も、途中で改行することがありません。

break-wordは、単語が長く、要素からはみ出る場合に、単語の途中でも折り返しをします。

それ以外は、単語の切れ目で折り返しされます。

日本語の場合、初期値と同じく要素幅に合わせて折り返しをします。

どちらの値も、日本語と英語で挙動が変わることに注意しましょう。

英語の場合、「単語の切れ目」と話しましたが、実際の単語の切れ目ではなく、間のスペースの挿入などで切れ目だと判断されます。

word-breakについて

word-breakは、要素端に長い単語が来たときに、どのように折り返しするか指定するプロパティです。

値は以下の3つです。

normalは、日本語の場合、要素端で折り返しされ、英語の場合は単語の切れ目で折り返しされます。

初期値なので、「overflow-wrap: normal」と同じ条件になりますね。

break-allは、日本語でも英語でも、要素端で強制的に折り返しされます。

短い英単語であっても折り返しされるので、読みづらくなることが予想されます。

keep-allは、日本語でも英語でも、単語の途中での折り返しがされません。

日本語の場合は、「、」「。」などの句読点ごとに折り返しされます。

overflow-wrapとword-breakの違い

ここまで紹介してきた2つのプロパティについて、さらに詳しく説明していきしょう。

これらのプロパティの違いには、「禁則処理の扱い」が大きく関係しています。

禁則処理とは、日本語において「、」や「。」、「？」などの句読点や記号が行頭に来ることを防ぐ措置のことです。

前述したように、「word-break: break-all」は、すべての言語が要素端で折り返しされます。

これは、禁則処理を解除する設定です。

反対に、「word-break: keep-all」は、禁則処理を完全に守り、要素端からはみ出る場合には、句読点などを折り返しポイントにしています。

「overflow-wrap: break-word」は、可能な限り禁則処理が守られます。

日本語の文章が長い時に、文章の途中で折り返しされますが、それでも句読点などが行頭に来ることはありません。

英語においても、単語が要素幅より長い場合にのみ、単語の途中で折り返しされます。

そうでない場合は、単語の切れ目で折り返しされます。

そのため、日本語の禁則処理を守りつつ、英語でも単語の切れ目で折り返しされることが多くなります。

特別な理由がない限りは、word-breakではなく、「overflow-wrap: break-word」で折り返しの設定をした方が良いでしょう。

overflow-wrap(word-wrap)が効かないときには？

要素の種類によっては、前述の「overflow-wrap: break-word」が効かない場合があります。

「display : table」を用いて、テーブルレイアウトを作成している場合に多いです。

これは、親要素に「table-layout: fixed」と指定し、「width」で横幅を指定することで解決します。

具体的には、以下のような記述になります。

<div class="parent">
<p class="child">テーブルセル1</p>
<p class="child">テーブルセル2</p>
</div>

.parent{
  display: table; 
  table-layout: fixed;
  width: 300px ;
}
.child{
  display: table-cell; 
  overflow-wrap: break-word;
  word-wrap: break-word;
}

このように、横幅を指定することで、折り返すかどうかの判断ができるようになります。

まとめ：2つのプロパティの違いを理解しよう

今回は、CSSでHTML内のテキストを折り返しする方法について紹介しました。

テキストの折り返しをするプロパティには、「overflow-wrap」と「word-break」の2つがありましたね。

2つのプロパティの違いと、使用する際の注意点についても説明しました。

Webサイトを構成する際に、今回の記事が参考になれば幸いです。