line-breakプロパティは何に使いますか？

line-breakプロパティは、テキストの改行ルールを指定し、特定の文字の改行位置を制御するために使います。

line-breakプロパティの主な値は何ですか？

主な値には、auto、loose、normal、strictがあります。それぞれの値が改行に与える影響が異なります。

line-breakプロパティを使用する際に注意するポイントは何ですか？

日本語や中国語のテキストで改行ルールを調整する際に効果的ですが、ブラウザによって挙動が異なる場合があるため注意が必要です。

【CSS】line-breakプロパティの使い方

概要

line-breakプロパティは、CSSでテキストの改行ルールを細かく制御するためのプロパティです。特に日本語、中国語、韓国語（CJK）などの東アジア言語において、句読点や特殊文字の改行位置を調整する際に重要な役割を果たします。

この記事では、line-breakプロパティの基本的な使い方から実践的な活用方法まで、コード例を交えて詳しく解説します。

line-breakプロパティとは

line-breakプロパティは、テキスト内でどのような改行ルールを適用するかを指定します。このプロパティは、word-breakやwhite-spaceプロパティでは対応できない、より細かい改行制御が必要な場面で活躍します。

基本構文

/* キーワード値 */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* グローバル値 */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: unset;

各プロパティ値の詳細

auto（デフォルト）

ブラウザが最適と判断する改行ルールを自動的に適用します。

.text-auto {
  line-break: auto;
}

この値を使用すると、ブラウザは言語や文脈に応じて適切な改行位置を決定します。

loose

より緩やかな改行ルールを適用します。日本語テキストでは句読点（「、」「。」）の後で改行が発生しやすくなります。

.text-loose {
  line-break: loose;
  /* 新聞や雑誌など、短い行幅のコンテンツに適している */
}

looseが効果的な場面:

狭いカラム幅のレイアウト
モバイルデバイス向けのテキスト表示
新聞スタイルの段組みレイアウト

normal

標準的な改行ルールを適用します。最も一般的な使用に適しています。

.text-normal {
  line-break: normal;
}

strict

厳格な改行ルールを適用します。句読点の前後での改行を制限し、テキストの読みやすさを重視します。

.text-strict {
  line-break: strict;
  /* 句読点が行頭に来ることを防ぐ */
}

strictが効果的な場面:

正式なドキュメント
印刷物に近いレイアウト
読みやすさを最優先するコンテンツ

anywhere

改行の機会がない場合、任意の文字間で改行を許可します。

.text-anywhere {
  line-break: anywhere;
  /* 長い単語やURLを強制的に折り返す */
}

実践的な使用例

日本語テキストでの比較

<div class="container">
  <p class="loose-text">
    これは「loose」の例です。句読点「、」や「。」の後で改行が発生しやすくなります。
  </p>
  <p class="strict-text">
    これは「strict」の例です。句読点「、」や「。」が行頭に来ないように制御されます。
  </p>
</div>

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

.loose-text {
  line-break: loose;
  background-color: #f0f8ff;
  margin-bottom: 10px;
  padding: 8px;
}

.strict-text {
  line-break: strict;
  background-color: #fff0f5;
  padding: 8px;
}

狭いコンテナでの活用

/* モバイル向けの狭いカードコンポーネント */
.mobile-card {
  width: 150px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 8px;
}

.mobile-card__title {
  font-size: 14px;
  font-weight: bold;
  line-break: loose; /* 狭い幅でも自然な改行 */
  word-wrap: break-word;
}

.mobile-card__description {
  font-size: 12px;
  line-break: normal;
  color: #666;
}

word-breakとの併用

/* line-breakとword-breakを組み合わせた設定 */
.combined-text {
  /* 日本語の改行ルールを厳格に */
  line-break: strict;

  /* 英単語は途中で改行しない */
  word-break: keep-all;

  /* はみ出した場合の処理 */
  overflow-wrap: break-word;
}

レスポンシブ対応の例

.responsive-text {
  line-break: normal;
}

/* 狭い画面では緩やかな改行を許可 */
@media (max-width: 480px) {
  .responsive-text {
    line-break: loose;
  }
}

/* 印刷時は厳格な改行ルール */
@media print {
  .responsive-text {
    line-break: strict;
  }
}

注意点とベストプラクティス

1. ブラウザ間の挙動の違い

line-breakプロパティはモダンブラウザで広くサポートされていますが、細かい挙動に違いがある場合があります。

/* フォールバックを含めた設定 */
.text-with-fallback {
  /* 基本的な改行制御 */
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* line-breakによる詳細制御 */
  line-break: strict;
}

2. 他のプロパティとの関係

line-breakは以下のプロパティと組み合わせて使用することで、より効果的なテキスト制御が可能です。

.comprehensive-text-control {
  /* 改行ルールの設定 */
  line-break: strict;

  /* 単語の分割制御 */
  word-break: normal;

  /* 空白の処理 */
  white-space: normal;

  /* 長い単語の折り返し */
  overflow-wrap: break-word;

  /* ハイフネーション（対応言語のみ） */
  hyphens: auto;
}

3. CJK言語特有の考慮点

日本語、中国語、韓国語のテキストでは、以下の点に注意してください。

/* 日本語コンテンツ向けの推奨設定 */
.japanese-text {
  line-break: strict;  /* 禁則処理を厳格に */
  word-break: normal;
  text-align: justify; /* 両端揃え */
}

/* 見出しなど短いテキスト向け */
.japanese-heading {
  line-break: loose;   /* 柔軟な改行を許可 */
  word-break: keep-all;
}

ブラウザサポート

ブラウザ	サポート状況
Chrome	58以降
Firefox	36以降
Safari	11以降
Edge	14以降
Opera	45以降

まとめ

line-breakプロパティは、特に日本語などのCJK言語で改行ルールを細かく制御するために不可欠なプロパティです。

値	用途
`auto`	ブラウザに改行判断を委ねる（デフォルト）
`loose`	狭いカラムや短い行幅に最適
`normal`	一般的な用途に適した標準設定
`strict`	正式なドキュメントや印刷物向け
`anywhere`	長い文字列を強制的に折り返す

適切な値を選択し、word-breakやoverflow-wrapと組み合わせることで、あらゆるレイアウトで美しく読みやすいテキスト表示を実現できます。

概要