改行を自動で!CSSで文字列を折り返しする方法【初心者向け】

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

自動で改行できる便利な技術なので、覚えておくといざという時便利でしょう。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

はい!

 

目次

 

折り返す書き方

CSSを使って文章を折り返して表現する際は次の書き方を用います。

大きく分けて3種類の方法がありますが、今回はその中から2種類の大事なものを紹介します。1つずつ見ていきましょう。

1つ目は、「word-wrap」について解説します。

CSSサンプルコード1

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

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

 

CSS内部で<p>を横幅500pxに設定してあるために途中で折り返しています。このように、ある範囲に<p>を収めたいときなどに使えますね。

「word-wrap」というコマンドにはいくつかのモードがあります。

  • nomal
  • break-word

それぞれ説明すると、「nomal」は単語の途中での改行をしません。「break-word」は単語の途中であっても改行します。

また、同等の機能を持つものに「word-break」というものがあります。

 

2つ目は、「word-break」について解説します。

CSSサンプルコード2

p.nomal{
 word-break: normal;
}

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

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

 

先ほどの「word-wrap」よりもはっきりと違いがわかると思います。

「break-all」と「nomal」、「keep-all」に差が生まれています。

 

上記に挙げたように「word-break」にも同様にモードがあります。

  • nomal
  • keep-all
  • break-all

「nomal」は英語なら単語ごとに区切って表示、日本語は範囲に合わせて区切ります。

「keep-all」単語の途中では改行しません。

「break-all」関係なく、表示範囲に合わせて改行します。

このようにして、範囲内に<p>ブロックを入れることなどができるようになりました。

 

田島悠介

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で文字列を折り返す方法について解説しました。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。