【コピペOK】テキストが改行されない問題を解決！CSSで改行させる方法はこれ

「テーブルのセルの中のテキストが改行されない…」

「システムのテストをしていたら、テキストが改行されないところがあった…」

コーディングをしている人は、このような問題に直面したことがあるのではないでしょうか？

おそらく、改行されていないのは英単語やURL、メールアドレスなどのはずです。
日本語は問題なく改行されているでしょう。

なぜなら、英単語や英文は、空白や半角スペースなどがないと改行されないからです。
空白がないと、ブラウザが改行位置を認識できないんですね。

とはいえ、はみ出しているテキストは改行させないと見栄えが悪いです。
もしクライアントさんからお仕事を受けていたとしたら、「改行するようにしてください」とお願いされることでしょう。

この記事では、CSSで英語のテキストを改行させる方法を解説します。
もうテキスト改行問題で悩むことがなくなりますよ。
コピペコードも載せておくので、ぜひ参考にしてみてください！

【コピペコード】改行されないテキストをCSSで改行させる

div{
  /* widthやmax-widthで表示範囲の横幅を指定する */
  width: 300px;
  max-width: 300px;
  
  /* その上で、下記を指定する。word-breakと併せて指定しましょう */
  overflow-wrap: break-word;
  
  /* その上で、下記のいずれかを指定する。overflow-wrapと併せて指定しましょう */
  word-break: break-word;
  word-break: break-all;
}

【デモ】テキストを改行させるCSSの使用例

See the Pen テキストの折り返し by さおさん (@saio-th) on CodePen.

CSSでテキストを改行させるためのポイント

表示範囲の横幅を指定する

まず、テキストをはみ出させたくない要素に対して、横幅を指定してあげます。
要素に横幅を指定することで「この場所はここまでですよー」というふうに、見えない壁を作るイメージです。
こうしておくことで、改行位置を明示することができます。

横幅を指定したうえで、overflow-wrapとword-breakの両方を指定する

overflow-wrapとword-breakは異なるプロパティなので、併せて指定しても問題ございません。
両方指定しておくのが無難です！
これらのプロパティについては、のちほど解説いたします。

【解説】CSSでテキストを改行させる方法

overflow-wrapとword-breakの役割

overflow-wrapとword-breakプロパティは、それぞれ「単語の途中で改行するかしないか」を指定できます。
少し長い英単語や英文だとはみ出してしまうくらいの狭い領域には、これらのプロパティを指定しておくことをオススメします。

overflow-wrapとword-breakの違い

次に、overflow-wrapとword-breakプロパティの違いについて説明します。

二つのプロパティの違いについてはこちらの記事で詳しく説明されています。詳細を知りたい方は以下の記事をご覧ください。
【※参考：改行を自動で！CSSで文字列を折り返しする方法【初心者向け】現役Webデザイナーが解説】

こちらの記事では以下のように記載されています。

• overflow-wrap（文章が領域の端に来た時に、単語の途中で改行するかどうかの設定）
• word-break（長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定）

言い換えると、それぞれ以下のような仕様ということですね。

仕様の違いはあれど、多くの場合で同じような挙動をします。
両方のプロパティを指定しておくとほとんどの改行に対応できるので、2つとも指定しておきましょう。

表示範囲に横幅を指定しなければならない

overflow-wrap、word-bredを指定しても、改行されないケースがあります。
どういったケースで効かないかというと、要素の横幅がコンテンツの幅で決定されるような場合です。

例えばテーブル要素。

• table-layout: fixed;が指定されていない
• セルの横幅が指定されていない

上記のいずれか、もしくは両方の条件に当てはまると、セルの横幅は中身によってなりゆきで決定されてしまいます。
このケースでは、テキストが自動で改行されないので要注意です。

ほかの例でいうとposition: absolute;を指定している要素。
こちらもCSSで横幅を指定しなければ、コンテンツの幅に左右されるので自動で改行されません。

英文や英単語を改行をさせるには表示範囲の横幅を指定するのを忘れないようにしましょう！

【まとめ】改行されないテキストをCSSで改行させる

この記事では、テキストをCSSで改行させる方法をお伝えしました。

• 長い英単語やURLが入る可能性がある要素には横幅を指定する
• overflow-wrapとword-breakは併用して指定する

これで、ほとんどの場合において改行で困らないはずです！

改行されない時はoverflow-wrapやword-breakの指定に目が行きがちです。
しかしどちらかというと「横幅を指定していない」ことを見落としやすい！

どちらの視点も忘れないようにチェックしてくださいね！

参考サイト

• 改行を自動で！CSSで文字列を折り返しする方法【初心者向け】現役Webデザイナーが解説
• overflow-wrap – CSS: カスケーディングスタイルシート | MDN
• word-break – CSS: カスケーディングスタイルシート | MDN