CSSでテキストの折り返しを完全解説！初心者でもわかる基本と注意点
生徒
「文章が横に長くなりすぎて、画面からはみ出すことがあるんですが、CSSで自動的に折り返すことってできますか？」
先生
「はい、CSSにはテキストを折り返すための便利なプロパティがあります。たとえばword-wrapやoverflow-wrapです。」
生徒
「それって何が違うんですか？それに、どうやって使うのかも知りたいです！」
先生
「それでは、テキストの折り返しの基本と、注意点について一緒に学んでいきましょう！」
1. CSSでテキストを折り返す必要性とは？
CSS（シーエスエス）とは、ウェブページの見た目を整えるためのスタイルを指定する言語です。たとえば、文字の色、大きさ、位置などを変えることができます。
その中でも、テキストの折り返しはとても重要です。なぜなら、パソコンやスマートフォンで画面の大きさが異なるからです。画面から文字がはみ出してしまうと、とても見にくくなってしまいます。
折り返しがないと、以下のように表示が崩れてしまうことがあります。
2. word-wrapとoverflow-wrapの違いとは？
word-wrapとoverflow-wrapは、どちらもCSSでテキストを強制的に折り返すために使われるプロパティです。
実はこの2つ、意味はほとんど同じです。現在では、overflow-wrapが標準的に使われています。
ただし、古いブラウザの対応を考えると、word-wrapも併用しておくと安心です。
指定方法は以下のようになります。
<style>
p {
word-wrap: break-word;
overflow-wrap: break-word;
}
</style>
<p>これはとても長い英単語を含む例文です：supercalifragilisticexpialidocious</p>
break-wordとは、「単語の途中でもいいから折り返す」という意味です。これによって、長すぎる単語がはみ出さずに折り返されるようになります。
3. テキストの折り返しが必要なシーンとは？
たとえば、ユーザーが書き込んだ長い単語やURL（ウェブアドレス）を表示する場合、画面から文字がはみ出してしまうことがあります。そんなときに、テキストの折り返し設定がとても役に立ちます。
以下のような場面で使うと効果的です：
- コメント欄やチャット画面など、ユーザーの入力を表示する場所
- スマートフォン表示時の狭い画面対応
- ニュース記事の見出しやタイトルが長い場合
4. overflow: hiddenとの違いと注意点
CSSにはoverflowというプロパティもあります。これは、要素からはみ出した部分をどうするかを決めるものです。たとえば、overflow: hiddenを指定すると、はみ出した部分が見えなくなってしまいます。
一方、word-wrapやoverflow-wrapは、はみ出さないように自動で折り返すためのプロパティです。
間違ってoverflow: hiddenだけを設定してしまうと、テキストが途中で切れてしまうので注意が必要です。
5. 英語やURLが長いときの対処方法
英語の文章や長いURLは、日本語のように途中で自動的に折り返されません。そのため、表示が崩れる原因になります。
その場合には、下記のようにword-breakやwhite-spaceなどの設定と組み合わせると、より正確に制御できます。
<style>
.long-text {
word-break: break-all;
white-space: normal;
}
</style>
<p class="long-text">https://www.thisisaverylongurlthatisgoingtobreakthelayout.com</p>
word-break: break-allは、「どこでも改行OK」にする設定です。
ただし、読みやすさが下がる場合があるので、使用する場所には気をつけましょう。
6. スマホ対応を考えた折り返しの工夫
スマートフォンのように画面が小さい端末では、テキストの折り返しがさらに重要になります。特にレスポンシブデザイン（どんな画面サイズでも見やすくする技術）を考えたときには、テキストが自然に折り返されるかを確認することがポイントです。
スマホで表示したときに画面から文字がはみ出さないように、下記のようにスタイルを整えることが大切です。
<style>
.responsive-text {
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
</style>
<p class="responsive-text">スマホでも見やすく表示されるように折り返しを設定しましょう。</p>
7. よくある失敗とその対処法
初心者がCSSでテキストを折り返すときによくあるミスは、以下のようなものです：
- word-wrapを設定したのに折り返されない → 実は
overflow-wrapだけが有効 - テキストの外側にある要素（例えば
div）に幅（width）の指定がない → 折り返しが機能しない - 全体が
white-space: nowrapになっていて、折り返されないようにされている
このような場合は、以下のようにスタイルの見直しが必要です。
まとめ
CSSでテキストの折り返しを正しく設定することは、パソコンとスマートフォンのどちらでも読みやすい文章レイアウトを実現するための大切な基礎です。今回の記事では、word-wrapとoverflow-wrapの違いや役割、word-breakやwhite-spaceとの組み合わせ方、そして長いURLや英単語が画面からはみ出さないようにする具体的なテクニックを確認しました。テキスト折り返しの設定は、見た目を整えるだけでなく、画面幅が小さい端末でも自然なレイアウトを保つための重要なポイントであり、CSSの基本として必ず身につけておきたい考え方です。
特に、word-wrapとoverflow-wrapは、長い単語や連続した文字列を途中で区切ってでもちゃんと折り返すための中核となるプロパティです。どちらもbreak-wordを指定することで、単語の途中でも改行を許可し、画面からテキストが飛び出さないようにコントロールできます。古いブラウザとの相性を考えて両方を併用しつつ、普段はoverflow-wrapを中心に使うという方針を覚えておくと、実務でも応用しやすくなります。また、コメント欄やチャット、長いタイトルが並ぶニュース一覧など、ユーザーの入力や動的なテキストが多い画面ほどCSSでのテキスト折り返しが活躍します。
さらに、word-breakやwhite-spaceを組み合わせることで、英語やURLの改行位置をより細かく制御できることも学びました。word-break: break-all;を指定すると、単語の途中でも容赦なく折り返すようになりますが、そのぶん読みづらさが増す場合もあるため、使う場所を慎重に選ぶことが大切です。一方でwhite-spaceは、改行やスペースの扱い方を制御するプロパティであり、nowrapを指定すると一切折り返されなくなるため、テキスト折り返しをしたい場面では適切に確認しておく必要があります。これらを総合的に理解しておくことで、レイアウト崩れを防ぎつつ、読みやすさを保ったテキスト表示が可能になります。
スマホ対応という観点では、幅をパーセント指定にしておきながら、テキスト折り返しを許可するスタイルを追加することで、狭い画面でも自然な改行が行われるようになります。width: 100%; とword-wrap: break-word;、overflow-wrap: break-word;を組み合わせたクラスを用意しておけば、多くの場面でそのまま使い回すことができる汎用的なCSSパターンになります。レスポンシブデザインの中でテキストが読みづらく感じるときには、フォントサイズだけではなく、折り返しの設定を見直すことが重要だと理解できたのではないでしょうか。
下記に、記事全体で学んだ内容を整理したサンプルコードを用意しました。CSSでテキストの折り返しを整理したいときに、基本のひな型としてそのまま利用したり、自分のプロジェクト用にクラス名や色をアレンジして使うこともできます。実際にブラウザで表示して、それぞれの違いを目で確かめてみると理解が一層深まります。
テキスト折り返し設定のサンプル
<style>
.wrap-basic {
word-wrap: break-word;
overflow-wrap: break-word;
}
.wrap-url {
word-break: break-all;
white-space: normal;
}
.wrap-responsive {
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 8px;
border: 1px solid #ccc;
}
</style>
<p class="wrap-basic">
とても長い単語や英語の文章が続くときにも、CSSのテキスト折り返しを指定しておけば画面からはみ出さずに表示できます。
supercalifragilisticexpialidocioussupercalifragilisticexpialidocious
</p>
<p class="wrap-url">
https://www.thisisaverylongurlthatisgoingtobreakthelayoutunlesswecontrolthetextwrapproperly.com
</p>
<p class="wrap-responsive">
スマートフォンでも読みやすいように、幅を画面いっぱいに広げつつテキストの折り返しを設定した例です。長い文章でも自然に改行されます。
</p>
このサンプルでは、wrap-basicクラスでword-wrapとoverflow-wrapを同時に指定し、wrap-urlクラスでword-breakとwhite-spaceを調整し、wrap-responsiveクラスでスマホ向けの折り返しと幅の指定を組み合わせています。実際に試してみると、連続した英単語がどの位置で折り返されるのか、長いURLがどのように分割されるのかがよく分かります。特に、チャット画面やコメント一覧など、ユーザーが自由な文字列を入力できる場面では、このようなクラスを事前に用意しておくことが安心につながります。
テキストの折り返しは、単に見た目を整えるだけでなく、コンテンツを最後まで読んでもらうための重要な配慮でもあります。行の途中で文字が見切れてしまうと、読む気持ちがそがれてしまいますが、適切な改行や折り返しが設定されていると、読む側はストレスなく最後までスクロールしてくれます。CSSでテキスト折り返しを丁寧に調整することは、閲覧する人へのやさしさにもつながると意識しておくと、細かなスタイル指定にも自然と気を配れるようになるでしょう。
今回学んだCSSのテキスト折り返しの基本を身につけておけば、これからさまざまなページレイアウトに取り組むときにも役立ちます。長文の説明文、動的に変化するタイトル、ユーザー入力が長くなりがちなフォームなど、実際の場面を思い浮かべながら少しずつ調整を重ねていくことで、自分なりのベストなスタイルが見つかっていきます。まずは小さなページから試し、ブラウザで実際の動きを確認しながら、CSSでテキストの折り返しを自在にコントロールできる感覚をつかんでいきましょう。
生徒
「きょうはCSSでテキストの折り返しを設定する方法をたくさん学びました。word-wrapとoverflow-wrapを合わせて使うと、長い単語や英語の文章がちゃんと折り返されることがよく分かりました。」
先生
「その理解はとても大事ですね。テキストが画面からはみ出さないように制御できると、どんな端末でも読みやすいページを作れるようになります。特にスマートフォンでの表示を意識したときには、折り返しの設定が欠かせません。」
生徒
「word-breakやwhite-spaceの違いも印象に残りました。break-allにするとどこでも改行できるけれど、読みやすさが下がることもあるから、使う場所を選んだほうがいいという点も覚えておきたいです。」
先生
「そうですね。テキストの折り返しは、ただ機能すればよいというだけでなく、読む人の目線やリズムを意識して調整するのが大切です。コメント欄やチャットのように予想外に長い文字列が来る場所では、今回のようなクラスを用意しておくと安心ですよ。」
生徒
「これからは、文章がはみ出して困ったときにあわてずに、word-wrapやoverflow-wrap、word-breakの設定を確認してみようと思います。自分の作るページで、実際に長いURLを入れてテストしながら、もっと理解を深めていきたいです。」
先生
「その姿勢はとてもいいですね。実際に試して、画面の見え方を自分の目で確かめることが一番の近道です。少しずつ応用例も増やしながら、CSSでテキストの折り返しを思い通りに扱えるようになっていきましょう。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSSでテキストの折り返しを設定するにはどうすればいいですか？
CSSでテキストの折り返しを設定するには、word-wrapやoverflow-wrapなどのプロパティを使います。これにより、長い文字列や単語が画面からはみ出さずに折り返されるようになります。
CSSのword-wrapとoverflow-wrapの違いは何ですか？
word-wrapとoverflow-wrapは基本的に同じ意味で使われますが、overflow-wrapが現在の標準プロパティで、word-wrapは古いブラウザ向けの対応として併用されます。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
