【CSS】改行制御の方法を実例付きで徹底的に解説

（最終更新日：2023年6月）

✔この記事は以下のような方におすすめです

「CSSでの改行方法について詳しく知りたい」
「CSSの改行コードが分からない」
「実践的なCSS改行の例を見てみたい」

✔この記事を読むことで得られる情報

CSS改行の基本知識
CSSでの改行方法とその適用
CSS改行の具体的な例

本記事では、CSSを使った改行の基本から、実践的な使い方やオプションを駆使した応用例まで、具体的な内容をわかりやすく解説しています。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/07 14:23:04時点 Amazon調べ-詳細)

CSSの改行制御を理解するための前提知識

こちらでは、CSSの基本について見ていきましょう。

まずは基本を理解のうえ、改行制御へ進んでください。

CSSとは？
改行制御の重要性

改行制御の重要性

CSSで改行を制御することは、ウェブサイトのデザインやレイアウトを整える上で極めて重要な要素のひとつ。

その理由は以下のとおり。

レスポンシブデザインのサポート：コンテンツの適切な表示と読みやすさが向上する
レイアウトの柔軟性：特定の箇所で改行を防止し、デザイン上の制約を回避できる
視覚的な整形：不自然な折り返しや断片化を防ぎ、読みやすさや視覚的な美しさを向上させる
テキストのハイライトやコピーの制御：不自然な選択やコピーを防止
読みやすさと視覚的な一貫性：統一感のあるウェブサイトやアプリケーションを実現する

CSSで改行を制御する方法とプロパティ

CSSでの改行制御は、いくつかのプロパティを使うことで可能になります。

それぞれの特性を理解し、適切に使い分けることが重要です。

white-spaceの使い方と設定方法
line-breakの使い方と設定方法
word-wrapの使い方と設定方法
その他の改行に関連するプロパティ

white-spaceの使い方と設定方法

改行を制御するために、white-spaceについて理解しましょう。

white-spaceプロパティの概要
white-spaceの主な値

white-spaceプロパティの概要

white-spaceプロパティは、要素内の空白や改行をどのように扱うかを指定するためのプロパティです。

空白とは改行だけでなく、スペースやタブも含みます。

このプロパティを使うと、テキスト内の空白を詳細に指定できます。

<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .nowrap {
    white-space: nowrap;
  }

  .pre {
    white-space: pre;
  }

  .pre-wrap {
    white-space: pre-wrap;
  }
</style>

<div class="container">
  <div class="nowrap">
    This text will not wrap and will stay on a single line.
  </div>

  <div class="pre">
    This text will preserve whitespace and line breaks.
    It will be displayed exactly as it is written in the HTML source code.
  </div>

  <div class="pre-wrap">
    This text will preserve whitespace but will wrap to the next line if necessary.
    Line breaks will be preserved as well.
  </div>
</div>

white-spaceの主な値

white-spaceプロパティの主な値は、以下のとおり。

normal：連続する空白を1つの空白として扱い、改行も自動でおこなう
nowrap：改行を抑制し、テキストを一行に表示する
pre：HTML内の空白や改行をそのまま表示する
pre-line：空白をまとめて扱いますが、改行はそのままにする
pre-wrap：空白も改行もそのままにする

以下がそれぞれのサンプルコードです。

<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .normal {
    white-space: normal;
  }

  .nowrap {
    white-space: nowrap;
  }

  .pre {
    white-space: pre;
  }

  .pre-line {
    white-space: pre-line;
  }

  .pre-wrap {
    white-space: pre-wrap;
  }
</style>

<div class="container">
  <div class="normal">
    This text has multiple spaces and line breaks.
    It will be displayed with normal white space handling.
  </div>

  <div class="nowrap">
    This text has multiple spaces and line breaks.
    It will be displayed on a single line without wrapping.
  </div>

  <div class="pre">
    This text has multiple spaces and line breaks.
    It will be displayed exactly as it is written in the HTML source code.
  </div>

  <div class="pre-line">
    This text has multiple spaces and line breaks.
    It will be displayed with collapsed white space but preserving line breaks.
  </div>

  <div class="pre-wrap">
    This text has multiple spaces and line breaks.
    It will be displayed exactly as it is written, preserving both white space and line breaks.
  </div>
</div>

line-breakの使い方と設定方法

line-breakは、改行位置を制御するプロパティです。

主に、日本語や中国語などの全角文字を扱う際に使われます。

設定できる値はこちら。

auto
loose
normal
strict

このプロパティを利用することで、文節や単語の途中での改行を防いだり、制御したりすることができます。

<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .auto {
    line-break: auto;
  }

  .loose {
    line-break: loose;
  }

  .normal {
    line-break: normal;
  }

  .strict {
    line-break: strict;
  }
</style>

<div class="container">
  <div class="auto">
    This is a longwordwithoutspaces. It will be automatically broken into multiple lines as needed.
  </div>

  <div class="loose">
    Thisisalongwordwithoutspaces.Itwillbebrokendowninto multiple lines with loose line breaking.
  </div>

  <div class="normal">
    Thisisalongwordwithoutspaces.Itwillbebrokendownintomultiplelineswithnormal linebreaking.
  </div>

  <div class="strict">
   Thisisalongwordwithoutspaces.Itwillbebrokendownintomultiplelineswithstrictlinebreaking.
  </div>
</div>

word-wrapの使い方と設定方法

word-wrapプロパティは、長い単語やURLをどのように折り返すかを指定するプロパティです。

このプロパティにはnormalとbreak-wordの2つの値を指定できます。

normal：単語の途中での改行を防ぐ
break-word：必要に応じて単語の途中でも改行する

<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .normal {
    word-wrap: normal;
  }

  .break-word {
    word-wrap: break-word;
  }
</style>

<div class="container">
  <div class="normal">
    Thisisalongwordwithoutanyspacesorbreakpointsinbetweenit.Itwillcontinuetoflowononesingleline.
  </div>

  <div class="break-word">
    Thisisalongwordwithoutanyspacesorbreakpointsinbetweenit.Itwillbebrokenintomultiplelineswiththebreak-wordproperty.
  </div>
</div>

その他の改行に関連するプロパティ

上記以外にも改行に関するプロパティがあります。

当記事では以下をご紹介します。

line-height
letter-spacing
text-align

line-height

line-heightプロパティは、行の高さを指定するためのプロパティです。

この値を調整することで、行間の空きをコントロールできます。

これにより、テキストの見やすさやレイアウトの調整が可能となるのです。

p {
    line-height: 1.5;
  }

letter-spacing

letter-spacingプロパティは、文字間のスペースを調整するためのプロパティです。

このプロパティを適切に使用することで、テキストの可読性を向上させられます。

p {
    letter-spacing: 0.1em;
  }

text-align

text-alignプロパティは、テキストの水平方向の位置を指定するプロパティです。

left、right、center、justifyなどの値を使い、テキストの揃え位置を調整できます。

text-align: center;

テキストは中央揃えになります。

実践！CSSで典型的な改行制御

こちらでは、前述したプロパティを使って具体的な改行制御を行う方法を説明します。

具体例をご覧いただければ、すぐに使いこなせるようになるでしょう。

まるでbrタグのように改行する方法
改行を抑制する方法
英単語途中での改行を防ぐ方法
記号による改行を制御する方法

まるでbrタグのように改行する方法

CSSで<br>タグのように強制的に改行を入れるために、white-spaceプロパティを使いましょう。

<style>
  .text {
    white-space: pre;
  }
</style>

<div class="text">
  This is the first line\nThis is the second line\nThis is the third line
</div>

これは、特定の場所で強制的に改行したい場合に便利です。

改行を抑制する方法

一行で表示したいテキストがある場合、white-space: nowrap;で、改行を抑制します。

これは、メニューバーや見出しなど、一行に収めたいテキストに有効です。

<style>
  .text {
    white-space: nowrap;
  }
</style>

<div class="text">This is a long text that should be displayed in a single line without any line breaks.</div>

英単語途中での改行を防ぐ方法

英単語やURLなど、途中で改行したくないテキストがある場合、word-wrap: normal;を指定します。

これにより、単語の途中で改行することを防げます。

<style>
  .text {
    word-wrap: normal;
  }
</style>

<div class="text">ThisIsALongWordThatShouldNotBeBrokenIntoMultipleLines</div>

記号による改行を制御する方法

記号（特に日本語の句読点や括弧など）による改行を制御するにはline-breakプロパティを使います。

例えば、line-break: strict;を指定することで、記号の前後での不自然な改行を防ぐことが可能です。

<style>
  .text {
    line-break: strict;
  }
</style>

<div class="text">これは、日本語の文章です。文中の句読点や括弧の前後での改行を防ぐためにline-breakプロパティを使用しています。</div>

レスポンシブデザインで改行を調整する方法

こちらでは、レスポンシブデザイン時の改行制御の方法と、そのコツを説明します。

メディアクエリを使った改行制御
柔軟なレスポンシブデザインのコツ

メディアクエリを使った改行制御

レスポンシブデザインにおける改行の調整は、メディアクエリを使って行います。

メディアクエリを使用することで、特定の画面サイズに合わせてスタイルを適用することが可能です。

例えば、スマートフォンの画面サイズでは文字サイズを小さくし、一行の文字数を減らして改行を調整するなどが考えられます。

<!DOCTYPE html>
<html>
<head>
  <style>
    /* デフォルトのスタイル */
    .text {
      font-size: 16px;
    }

    /* スマートフォン向けのスタイル */
    @media only screen and (max-width: 480px) {
      .text {
        font-size: 14px;
        word-wrap: break-word;
      }
    }

    /* タブレット向けのスタイル */
    @media only screen and (min-width: 481px) and (max-width: 768px) {
      .text {
        font-size: 16px;
        word-wrap: normal;
      }
    }

    /* デスクトップ向けのスタイル */
    @media only screen and (min-width: 769px) {
      .text {
        font-size: 18px;
        word-wrap: normal;
      }
    }
  </style>
</head>
<body>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo ante non justo tincidunt, sit amet dignissim felis tristique. Nulla facilisi. Sed consectetur tincidunt ante, id finibus enim pulvinar et. Donec vestibulum turpis ac arcu finibus, et lacinia libero commodo. Morbi feugiat neque eu facilisis cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada elementum facilisis. Phasellus volutpat risus a enim rhoncus venenatis.
  </div>
</body>
</html>