改行を自動で!CSSで文字列を折り返しする方法【初心者向け】現役Webデザイナーが解説

初心者向けにCSSで文字列を折り返す方法について解説しています。サイト内の文章が長いときに自動で改行し、レイアウトを整えてくれます。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

今回はCSSで文字列を折り返しする方法を紹介します。

  • HTMLで打ち込んだ文字がはみ出してしまいデザインが崩れてしまう
  • 文章の改行位置を細かくコントロールしたい

などとお悩みのみなさん、ぜひこの記事でCSSの文章折り返しについてマスターしてください!

目次

 

田島悠介

ここでは、文字列の改行方法について勉強していくよ。

大石ゆかり

田島メンター!!改行にも指定するものがあるんですか〜?

田島悠介

例えば英単語の途中でボックスの右端に到達したとき、その単語の中で折り返すかどうかなどを決めることができるんだ。

代表的な例を見てみよう。

大石ゆかり

はい!

 

折り返す書き方

CSSを使って、1つの要素の中で文章を折り返して表現する際は2種類の書き方を用います。

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

 

CSSの公式ドキュメントを見ると、このように記載されているはずです。

注意してほしいのは、ここで言う単語 というのは、英文における英単語のこと。

 

そして、実際に辞書に登録されている英単語かどうかは関係ありません。

英文でスペースなどの記号で区切られている一つのかたまりを、英単語と捉えて動作します。

単語の区切りとして解釈される記号は「スペース」「?」「-」「、」「。」などがあります。

 

そして日本語は、「単語」や「文章」で説明されている上記の動きとは、まったく異なります。

それぞれ詳しく見ていきましょう。

 

 

overflow-wrap

文章が領域の端に来た時に、単語の途中で改行するかどうかの設定です。

単語の途中で改行しない normal と、単語の途中で改行する break-word の2つから選べます。

break-spaces という値も設定できますが、normalを設定した場合と 同じ挙動になります。

 

実際の動きを見てみましょう。

 

英文が、表示領域の右端までいったときの挙動が変わります。

normalを選ぶと、次の単語の区切りで改行するため、少しはみ出してしまいます。

break-wordを選ぶと、単語の途中でもはみ出さないように改行します。

日本語は、どちらを選んだとしても、はみ出さないように改行されていますね。

 

break-wordは、表示領域を絶対にはみ出さないようにしながら、可能な限り「句読点を文頭にしない」など文章を読みやすくなる位置で折り返してくれます。

しかし、親要素の幅がautoの場合や、テーブルには使うことができませんので、注意してくださいね。

 

overflow-wrapは、以前マイクロソフトの拡張機能としてword-wrapというプロパティ名でした。

CSS標準機能になるにあたり、overflow-wrapというプロパティ名に変わっています。

ただし、古いIEでも動作させるために、word-wrapも合わせて指定したほうが無難です。

 

 

CSSサンプルコード

p.nomal{
  overflow-wrap normal;
}

p.break{
  overflow-wrap: break-word;
}

word-break

長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定です。

normal、keep-all、break-all、break-word 4つから選択でき、それぞれ下記のような動きと説明されています。

  • normal:その言語の習慣的な規則に従って適宜改行する
  • break-all:文字列のどこでも、単語の途中でも改行する
  • keep-all:単語の途中では改行しない
  • break-word:単語の区切りで改行するが、場合によっては単語の途中でも改行する

 

実際の動きを見てみましょう。

 

normalは、英語は単語単位ではみ出さないように改行しますが、長い単語ははみ出していますね。

日本語はどこでも改行します。

break-allは、英語日本語どちらも、はみ出さないように、どんな位置でも改行します。

keep-allは、単語の途中で改行しないよう、区切り記号でのみ改行します。

日本語も区切り記号でのみ改行になるので、はみ出してしまいます。

break-wordは、できるだけ単語の区切りで改行するようにしつつ、どうしてもはみ出す場合は単語の途中でも改行しています。

 

英文を見やすい位置で改行するためには、break-wordがシンプルで使いやすいですね。

 

 

CSSサンプルコード1

p.nomal{
  word-wrap: break-word;
}

p.break{
  word-wrap: break-word;
}


CSSサンプルコード2

p.nomal{
 word-break: normal;
}

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

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

 

 

田島悠介
word-wrapとword-breakの基本の書き方になるよ。
大石ゆかり
ちなみに初期値ではどうなっているんですか?
田島悠介
両方とも”normal”、単語の途中では改行しない状態だね。

値を変えた場合の状態も画面で確認してみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

実際にコードを書いてみましょう。

 

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS 折り返し</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <p class="w-nomal">
      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
    </p>
    <p class="w-break">
      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
    </p>
    <p class="b-nomal">
      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
    </p>
    <p class="b-break">
      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
    </p>
    <p class="b-keep">
      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
    </p>

  </body>
</html>

 

 

CSS

p{
  width: 500px;
}

p.w-nomal{
  word-wrap: normal;
}

p.w-break{
  word-wrap: break-all;
}
 
p.b-nomal{
  word-break: normal;
}
 
p.b-break{
  word-break: break-all;
}
 
p.b-keep{
  word-break: keep-all;
}

 

上記サンプルでは5パターンをすべて表示しています。

 

「word-wrap」の場合

スクリーンショット 2016-08-30 20.53.57

 

「word-break」の場合

スクリーンショット 2016-08-30 20.54.17

 

日本語のWebページではあまり「break-all」でも気にならないかもしれないですが、英語ページや、URLの時は「keep-all」などを選んでみるとよいかもしれません。

CSSによる改行の指定は、日本語と英語で挙動が違ってくるので、少し難しいです。

日本語の文章でも、改行して読みやすいところにあえて「スペース」などの単語区切り記号を入れておくと、keep-allで改行してくれやすくなりますよ。

 

それでも、CSSによる文章の折り返しは、なかなか理想の挙動になりづらいポイントです。

モバイルファーストなレスポンシブデザインでは、様々な画面幅でうまく表示させなくてはいけないので、特に大変ですね。

どうしても改行したい箇所は、CSSに頼らず、必ずHTMLのタグを複数に分けましょう。

 

以上、CSSで文字列を折り返す方法について解説しました。

執筆してくれたメンター

田屋 貴祥

最新テクノロジーを広めるという情熱を持ちクラウドベンダーでセールスエンジニアに従事。

その後、フリーランスWeb制作をしながら、海外で人生の楽しみ方を学ぶ。

海外のWeb制作Tipsを翻訳し実践し、日々新しいテクニックを研究しています。

最近はNuxtでJAMStack、CSSはブロークングリッドやシネマグラフ、グラスモーフォリズムが好き。

 

 

田島悠介

それぞれの値を指定したときの、ブラウザでの状態だよ。

大石ゆかり

word-wrapでbreak-wordを値に指定した場合でも、英単語の途中で折り返されていないのはどうしてですか〜?

田島悠介

word-wrapのbreak-wordでは、「行の中の他の部分で改行するポイントがない場合にのみ」単語途中での折り返しを行うんだ。

なので他の空白部分で改行を行っているわけだね。

大石ゆかり

逆にword-breakの方は、途中で改行できるスペースがあっても関係なく単語の途中で折り返すということですね。

分かりました!

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!