【html&css】white-spaceの使い方とnowrap・pre・pre-wrapの使い分け

2026年3月18日2026年3月20日

CSSのwhite-spaceは、HTML内の改行や連続する空白の表示方法及びテキストの自動折り返しを制御するプロパティです。

本記事では、各値（normal、nowrap、pre-wrap等）の仕様の違いと、実務においてレイアウト崩れを防ぐ使い分けについて解説します。

CSSのwhite-spaceとは

セレクタ { white-space: 値; }

white-spaceプロパティは、HTML内に書かれた「半角スペース」「タブ」「改行」といった空白文字（ホワイトスペース）を、ブラウザ上でどのように表示するかをコントロールするCSSです。

「文字が折り返してレイアウトが崩れる。」「HTMLで改行したのに画面に反映されない。」といった文字周りのトラブルは、white-spaceプロパティで解決します。

white-spaceとは

HTMLの空白・改行が無視される問題とは？
white-spaceで指定できる6つの値
nowrapではみ出した文字を「…」で省略する

HTMLの空白・改行が無視される問題とは？

エディタ上でエンターキーで改行したり、スペースキーで空白を作っても、ブラウザで見ると『1つの半角スペース』に変換されるといった現象です。

これを解決するために、<br>タグで改行したり、 で空白を作ったりしていませんか？

white-spaceを使えば、HTMLエディタに書いた「見たままの空白や改行」を画面に反映させられます。

❌ 指定なし (空白・改行が消える) ⭕️ white-space: pre-wrap; を指定

こんにちは！ここはスペースがたくさんある文章です。改行もそのまま反映させたいですよね。

HTMLコード表示

<div class="ws1-wrapper">
  <input type="radio" name="ws1-state" id="ws1-off" class="ws1-radio" checked>
  <input type="radio" name="ws1-state" id="ws1-on" class="ws1-radio">

  <div class="ws1-controls">
    <label for="ws1-off" class="ws1-btn">❌ 指定なし (空白・改行が消える)</label>
    <label for="ws1-on" class="ws1-btn">⭕️ white-space: pre-wrap; を指定</label>
  </div>

  <div class="ws1-demo-area">
    <div class="ws1-box target-box-ws1">
      こんにちは！
      
      ここは      スペースが      たくさんある
      文章です。
      
      改行も
      そのまま
      反映させたいですよね。
    </div>
  </div>
</div>

CSSコード表示

.ws1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.ws1-radio {
  display: none;
}

.ws1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ws1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#ws1-off:checked ~ .ws1-controls [for="ws1-off"] {
  background-color: #dc3545;
  color: white;
}

#ws1-on:checked ~ .ws1-controls [for="ws1-on"] {
  background-color: #198754;
  color: white;
}

.ws1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.ws1-box {
  width: 100%;
  max-width: 400px;
  background-color: #e3f2fd;
  border: 2px solid #0d6efd;
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  /* 初期値は normal（空白・改行を無視する） */
}

/* ⭕️ pre-wrapを指定すると、エディタの見た目通りに表示される */
#ws1-on:checked ~ .ws1-demo-area .target-box-ws1 {
  white-space: pre-wrap;
  background-color: #d1e7dd;
  border-color: #198754;
}

white-spaceで指定できる6つの値

white-spaceは、主に実務で使う5つの値と新しく追加された第6の値が存在します。

「自動での折り返し」と「空白・改行の扱い」がどのように異なるのか、違いを整理しましょう。

normal（初期値）
連続する空白や改行を1つのスペースにまとめます。
端まで来ると自動で折り返します。
nowrap（ノーラップ）
空白の扱いはnormalと同じですが、端まで来ても折り返しません。（1行で突き進みます。）
pre（プレ）
HTMLの空白や改行をそのまま表示します。
ただし端まで来ても自動で折り返しません。
pre-wrap
HTMLの空白や改行をそのまま表示しつつ、端まで来たら自動で折り返します。
pre-line
HTMLの空白は1つにまとめますが、改行はそのまま表示し、端まで来たら自動で折り返します。
break-spaces
pre-wrapとほぼ同じですが、「行の末尾にある連続したスペース」の扱いだけが違います。
pre-wrapは行末のスペースが枠外にぶら下がるのに対し、break-spacesは行末のスペースの連続でも改行（折り返し）します。

※この他に、他のCSSと同様に親の設定を引き継ぐinheritなどの共通値も指定可能です。

① normal (初期値) ② nowrap (絶対折り返さない) ③ pre (そのまま・折り返さない) ④ pre-wrap (実務で一番便利！) ⑤ pre-line (改行のみそのまま) ⑥ break-spaces (行末の空白も改行)

HTMLで書いた連続スペースや改行がどうなるかに注目してください。また、ここから行の末尾に続く連続スペースがどう折り返されるか（④と⑥の違い）も比べてみましょう！

HTMLコード表示

<div class="ws2-wrapper">
  <input type="radio" name="ws2-state" id="ws2-normal" class="ws2-radio" checked>
  <input type="radio" name="ws2-state" id="ws2-nowrap" class="ws2-radio">
  <input type="radio" name="ws2-state" id="ws2-pre" class="ws2-radio">
  <input type="radio" name="ws2-state" id="ws2-prewrap" class="ws2-radio">
  <input type="radio" name="ws2-state" id="ws2-preline" class="ws2-radio">
  <input type="radio" name="ws2-state" id="ws2-breakspaces" class="ws2-radio">

  <div class="ws2-controls">
    <label for="ws2-normal" class="ws2-btn">① normal (初期値)</label>
    <label for="ws2-nowrap" class="ws2-btn">② nowrap (絶対折り返さない)</label>
    <label for="ws2-pre" class="ws2-btn">③ pre (そのまま・折り返さない)</label>
    <label for="ws2-prewrap" class="ws2-btn">④ pre-wrap (実務で一番便利！)</label>
    <label for="ws2-preline" class="ws2-btn">⑤ pre-line (改行のみそのまま)</label>
    <label for="ws2-breakspaces" class="ws2-btn">⑥ break-spaces (行末の空白も改行)</label>
  </div>

  <div class="ws2-demo-area">
    <div class="ws2-box target-box-ws2">
      HTMLで    書いた    連続スペースや
      
      改行がどうなるかに注目してください。
      また、ここから行の末尾に続く連続スペースが              どう折り返されるか（④と⑥の違い）も比べてみましょう！
    </div>
  </div>
</div>

CSSコード表示

.ws2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.ws2-radio {
  display: none;
}

.ws2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ws2-btn {
  background-color: #e9ecef;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 13px;
}

/* 選択されたボタンの色を変える */
#ws2-normal:checked ~ .ws2-controls [for="ws2-normal"],
#ws2-nowrap:checked ~ .ws2-controls [for="ws2-nowrap"],
#ws2-pre:checked ~ .ws2-controls [for="ws2-pre"],
#ws2-prewrap:checked ~ .ws2-controls [for="ws2-prewrap"],
#ws2-preline:checked ~ .ws2-controls [for="ws2-preline"],
#ws2-breakspaces:checked ~ .ws2-controls [for="ws2-breakspaces"] {
  background-color: #0d6efd;
  color: white;
}

.ws2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.ws2-box {
  width: 250px; /* 折り返しを確認するために幅を狭く設定 */
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  font-family: monospace; /* 空白がわかりやすいように等幅フォント */
  /* 空白部分が視覚的にわかりやすいように背景色を少しつける */
  background-image: linear-gradient(rgba(255, 193, 7, 0.2) 1px, transparent 1px);
  background-size: 100% 1.6em;
}

/* 各値の切り替え */
#ws2-normal:checked ~ .ws2-demo-area .target-box-ws2 {
  white-space: normal;
}

#ws2-nowrap:checked ~ .ws2-demo-area .target-box-ws2 {
  white-space: nowrap;
  background-color: #f8d7da;
  border-color: #dc3545;
}

#ws2-pre:checked ~ .ws2-demo-area .target-box-ws2 {
  white-space: pre;
  background-color: #e2e3e5;
  border-color: #6c757d;
}

#ws2-prewrap:checked ~ .ws2-demo-area .target-box-ws2 {
  white-space: pre-wrap;
  background-color: #d1e7dd;
  border-color: #198754;
}

#ws2-preline:checked ~ .ws2-demo-area .target-box-ws2 {
  white-space: pre-line;
  background-color: #cff4fc;
  border-color: #0dcaf0;
}

#ws2-breakspaces:checked ~ .ws2-demo-area .target-box-ws2 {
  white-space: break-spaces;
  background-color: #e2d9f3;
  border-color: #6f42c1;
}

nowrapではみ出した文字を「…」で省略する

実務においてwhite-spaceが最も使われるのが「カードタイトルや記事抜粋が長すぎる時、1行に制限して『…（三点リーダー）』で省略する」というテクニックです。

以下をセットで指定するだけです。

white-space: nowrap;（強制的に1行にする）
overflow: hidden;（はみ出た部分を隠す）
text-overflow: ellipsis;（隠れた末尾を「…」にする）

❌ 指定なし (改行されて不格好) ⭕️ 3行を指定 (省略)

News

2026.03.18

【重要】春の特別キャンペーンのお知らせと、システムメンテナンスに伴うサービス一時停止に関するご案内

HTMLコード表示

<div class="ws3-wrapper">
  <input type="radio" name="ws3-state" id="ws3-bad" class="ws3-radio" checked>
  <input type="radio" name="ws3-state" id="ws3-good" class="ws3-radio">

  <div class="ws3-controls">
    <label for="ws3-bad" class="ws3-btn">❌ 指定なし (改行されて不格好)</label>
    <label for="ws3-good" class="ws3-btn">⭕️ 3行を指定 (省略)</label>
  </div>

  <div class="ws3-demo-area">
    
    <div class="ws3-card">
      <div class="ws3-image">News</div>
      <div class="ws3-content">
        <span class="ws3-date">2026.03.18</span>
        <div class="ws3-title target-title-ws3">
          【重要】春の特別キャンペーンのお知らせと、システムメンテナンスに伴うサービス一時停止に関するご案内
        </div>
      </div>
    </div>

  </div>
</div>

CSSコード表示

.ws3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.ws3-radio {
  display: none;
}

.ws3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ws3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#ws3-bad:checked ~ .ws3-controls [for="ws3-bad"] {
  background-color: #dc3545;
  color: white;
}

#ws3-good:checked ~ .ws3-controls [for="ws3-good"] {
  background-color: #198754;
  color: white;
}

.ws3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px;
  display: flex;
  justify-content: center;
}

/* ニュースカードのベース */
.ws3-card {
  width: 280px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  overflow: hidden;
}

.ws3-image {
  height: 100px;
  background-color: #0d6efd;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
}

.ws3-content {
  padding: 15px;
}

.ws3-date {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 8px;
  display: block;
}

.ws3-title {
  margin: 0;
  font-size: 15px;
  color: #333;
  line-height: 1.4;
  /* 初期状態は指定なし（勝手に改行される） */
}

#ws3-good:checked ~ .ws3-demo-area .target-title-ws3 {
  white-space: nowrap;         /* 1. 絶対に改行させない */
  overflow: hidden;            /* 2. はみ出た部分を隠す */
  text-overflow: ellipsis;     /* 3. 隠れた部分を「…」にする */
  color: #198754;
}

white-space: normal;とは

white-space: normal;は、全てのHTML要素に設定されている「初期値（デフォルト）」です。

CSSに書かなくても、ブラウザは常にこのルールに従ってテキストを表示します。

normalには、「無駄な空白や改行をなかったことにする」「端まで来たら自動で折り返す」という2つの基本ルールがあります。

white-space: normal;

normalは勝手に空白と改行が消える
スペースキー連打で文字を揃えるのはNG
スマホ表示ではnormalを使ってリセットする

normalは勝手に空白と改行が消える

「エディタ上でEnterキーで改行したり、スペースキーで間を空けたりしたのに、ブラウザ表示すると1つの半角スペースになっている。」といった現象があります。

これこそがwhite-space: normal;の役割です。

HTMLコード内の余分な空白や改行を「不要なもの」として自動的に圧縮（1つの半角スペースに変換）するため、HTMLコードを改行して見やすく書くことができます。

❌ エディタに書いたそのままの見た目 ⭕️ normalが効いたブラウザの見た目

こんにちは！ここはスペースがたくさんある文章です。 normalの力で、これらはすべて圧縮されます！

HTMLコード表示

<div class="wn1-wrapper">
  <input type="radio" name="wn1-state" id="wn1-raw" class="wn1-radio" checked>
  <input type="radio" name="wn1-state" id="wn1-normal" class="wn1-radio">

  <div class="wn1-controls">
    <label for="wn1-raw" class="wn1-btn">❌ エディタに書いたそのままの見た目</label>
    <label for="wn1-normal" class="wn1-btn">⭕️ normalが効いたブラウザの見た目</label>
  </div>

  <div class="wn1-demo-area">
    <div class="wn1-box target-box-wn1">
      こんにちは！
      
      ここは      スペースが      たくさんある
      文章です。
      
      normalの力で、これらはすべて圧縮されます！
    </div>
  </div>
</div>

CSSコード表示

.wn1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wn1-radio {
  display: none;
}

.wn1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wn1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wn1-raw:checked ~ .wn1-controls [for="wn1-raw"] {
  background-color: #dc3545;
  color: white;
}

#wn1-normal:checked ~ .wn1-controls [for="wn1-normal"] {
  background-color: #0d6efd;
  color: white;
}

.wn1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.wn1-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ❌ エディタの見た目（デモ用にpre-wrapで再現） */
#wn1-raw:checked ~ .wn1-demo-area .target-box-wn1 {
  white-space: pre-wrap;
}

/* ⭕️ 実際のブラウザでの見え方 */
#wn1-normal:checked ~ .wn1-demo-area .target-box-wn1 {
  white-space: normal;
  background-color: #e3f2fd;
  border-color: #0d6efd;
}

スペースキー連打で文字を揃えるのはNG

normalが効いている状態は、連続したスペースは1つに圧縮されます。

いくらスペースを打ってもnormalに消されるため、きれいに揃うことはありません。

要素を横に並べて揃えたい時は空白文字ではなく、FlexboxやTableを使うのがよいです。

❌ スペース(半角)連打で揃える (揃わない) ⭕️ CSS (Flexbox) で揃える (綺麗！)

名前: 山田太郎

メール: info@example.com

電話番号: 090-0000-0000

※normalによって半角スペースが圧縮され、見出しの文字数（2文字、3文字、4文字）の違いでガタガタになります。

名前：

山田太郎

メール：

info@example.com

電話番号：

090-0000-0000

※CSSで幅を指定しているので、完璧に揃います。

HTMLコード表示

<div class="wn2-wrapper">
  <input type="radio" name="ws2-state" id="wn2-bad" class="wn2-radio" checked>
  <input type="radio" name="ws2-state" id="wn2-good" class="wn2-radio">

  <div class="wn2-controls">
    <label for="wn2-bad" class="wn2-btn">❌ スペース(半角)連打で揃える (揃わない)</label>
    <label for="wn2-good" class="wn2-btn">⭕️ CSS (Flexbox) で揃える (綺麗！)</label>
  </div>

  <div class="wn2-demo-area">
    
    <div class="wn2-box target-bad-wn2">
      <p>名前:   山田 太郎</p> <p>メール:   info@example.com</p> <p>電話番号:   090-0000-0000</p> <span class="wn2-note">※normalによって半角スペースが圧縮され、見出しの文字数（2文字、3文字、4文字）の違いでガタガタになります。</span>
    </div>

    <div class="wn2-box target-good-wn2">
      <div class="wn2-flex-row">
        <div class="wn2-label">名前：</div>
        <div class="wn2-value">山田 太郎</div>
      </div>
      <div class="wn2-flex-row">
        <div class="wn2-label">メール：</div>
        <div class="wn2-value">info@example.com</div>
      </div>
      <div class="wn2-flex-row">
        <div class="wn2-label">電話番号：</div>
        <div class="wn2-value">090-0000-0000</div>
      </div>
      <span class="wn2-note-good">※CSSで幅を指定しているので、完璧に揃います。</span>
    </div>

  </div>
</div>

CSSコード表示

.wn2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wn2-radio {
  display: none;
}

.wn2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wn2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wn2-bad:checked ~ .wn2-controls [for="wn2-bad"] {
  background-color: #dc3545;
  color: white;
}

#wn2-good:checked ~ .wn2-controls [for="wn2-good"] {
  background-color: #198754;
  color: white;
}

.wn2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.wn2-box {
  width: 100%;
  max-width: 320px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  font-size: 15px;
  color: #333;
}

.wn2-box p {
  margin: 0 0 10px 0;
}

.wn2-note {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: #dc3545;
  font-weight: bold;
}

.wn2-note-good {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: #198754;
  font-weight: bold;
}

/* ⭕️ 正しいプロの書き方（Flexbox）のスタイル */
.wn2-flex-row {
  display: flex;
  margin-bottom: 10px;
}

.wn2-label {
  width: 90px; /* 見出しの幅を固定する */
  font-weight: bold;
  flex-shrink: 0;
}

.wn2-value {
  flex-grow: 1;
}

/* 表示の切り替え処理 */
.target-good-wn2 {
  display: none;
}

#wn2-good:checked ~ .wn2-demo-area .target-bad-wn2 {
  display: none;
}

#wn2-good:checked ~ .wn2-demo-area .target-good-wn2 {
  display: block;
  border-color: #198754;
  background-color: #f8fff9;
}

スマホ表示ではnormalを使ってリセットする

初期値であるnormalをCSSに書き込むことは滅多にありません。

しかし、実務においてnormalを指定しなければいけない場面があります。

それは、スマホ対応（レスポンシブデザイン）の時です。

PC画面は文字を1行に収めるためにwhite-space: nowrap;（改行禁止）を指定していた要素がスマホに適用されると、文字が横にはみ出してレイアウトが崩壊します。

これを防ぐため、スマホ用CSS（メディアクエリ）でwhite-space: normal;を上書き指定し、改行禁止を解除（リセット）する必要があります。

💻 PCの広い画面 (nowrap) 📱 罠：スマホの狭い画面 (はみ出す！) ✨ スマホ画面を normal でリセット

HTMLコード表示

<div class="wn3-wrapper">
  <input type="radio" name="wn3-state" id="wn3-pc" class="wn3-radio" checked>
  <input type="radio" name="wn3-state" id="wn3-sp-bad" class="wn3-radio">
  <input type="radio" name="wn3-state" id="wn3-sp-good" class="wn3-radio">

  <div class="wn3-controls">
    <label for="wn3-pc" class="wn3-btn">💻 PCの広い画面 (nowrap)</label>
    <label for="wn3-sp-bad" class="wn3-btn">📱 罠：スマホの狭い画面 (はみ出す！)</label>
    <label for="wn3-sp-good" class="wn3-btn">✨ スマホ画面を normal でリセット</label>
  </div>

  <div class="wn3-demo-area target-area-wn3">
    
    <div class="wn3-menu-container">
      <div class="wn3-menu-item">会社概要と沿革</div>
      <div class="wn3-menu-item">提供サービス一覧</div>
      <div class="wn3-menu-item">よくあるご質問</div>
      <div class="wn3-menu-item">お問い合わせ</div>
    </div>

  </div>
</div>

CSSコード表示

.wn3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wn3-radio {
  display: none;
}

.wn3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wn3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 13px;
}

#wn3-pc:checked ~ .wn3-controls [for="wn3-pc"] {
  background-color: #0d6efd;
  color: white;
}

#wn3-sp-bad:checked ~ .wn3-controls [for="wn3-sp-bad"] {
  background-color: #dc3545;
  color: white;
}

#wn3-sp-good:checked ~ .wn3-controls [for="wn3-sp-good"] {
  background-color: #198754;
  color: white;
}

.wn3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  display: flex;
  justify-content: center;
  /* デフォルトはPCの広い画面を想定 */
  transition: all 0.4s ease;
}

.wn3-menu-container {
  display: flex;
  gap: 15px;
  background-color: #333;
  padding: 10px 20px;
  border-radius: 8px;
}

.wn3-menu-item {
  color: white;
  font-size: 14px;
  font-weight: bold;
  /* PC版の指定：改行を禁止して1行で綺麗に見せる */
  white-space: nowrap; 
}

/* 📱 罠の状態：画面幅だけスマホサイズ（狭く）なるが、nowrapが効いたまま */
#wn3-sp-bad:checked ~ .wn3-demo-area {
  padding: 20px 0; /* 狭さを強調 */
}

#wn3-sp-bad:checked ~ .wn3-demo-area .wn3-menu-container {
  width: 200px; /* スマホの狭い画面幅を再現 */
  /* 中身がはみ出して崩壊している状態 */
}

/* 解決の状態：狭い画面幅の時に、normalでリセットする */
#wn3-sp-good:checked ~ .wn3-demo-area {
  padding: 20px 0;
}

#wn3-sp-good:checked ~ .wn3-demo-area .wn3-menu-container {
  width: 200px; /* スマホの狭い画面幅を再現 */
  flex-wrap: wrap; /* ボックス自体も折り返す */
  background-color: #198754;
}

#wn3-sp-good:checked ~ .wn3-demo-area .wn3-menu-item {
  /* ここで上書き。nowrapを解除し、文字の折り返しを許可する */
  white-space: normal; 
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 5px;
}

white-space: nowrap;とは

white-space: nowrap;は、テキストを改行させないといった値です。

使い方を間違えると、サイト全体のレイアウトを破壊してしまう点に注意しましょう。

white-space: nowrap;

右端に来てもテキストを改行しない
枠を突き破って横揺れする
スマホで「ボタンの文字が変に改行される」を防ぐ

右端に来てもテキストを改行しない

初期値であるnormalの場合、テキストが親要素の右端に到達すると、ブラウザが自動的に判断し次の行へ折り返します。

しかし、white-space: nowrap;を指定すると、どれだけ文章が長くても、親の枠がどれだけ狭くても改行しません。

❌ normal (端で折り返す) ⭕️ nowrap (絶対に折り返さない！)

この文章はとても長いですが、nowrapを指定すると親の枠の端に到達しても絶対に折り返しません。1行でどこまでも突き進みます！

HTMLコード表示

<div class="wnw1-wrapper">
  <input type="radio" name="wnw1-state" id="wnw1-normal" class="wnw1-radio" checked>
  <input type="radio" name="wnw1-state" id="wnw1-nowrap" class="wnw1-radio">

  <div class="wnw1-controls">
    <label for="wnw1-normal" class="wnw1-btn">❌ normal (端で折り返す)</label>
    <label for="wnw1-nowrap" class="wnw1-btn">⭕️ nowrap (絶対に折り返さない！)</label>
  </div>

  <div class="wnw1-demo-area">
    <div class="wnw1-box target-box-wnw1">
      この文章はとても長いですが、nowrapを指定すると親の枠の端に到達しても絶対に折り返しません。1行でどこまでも突き進みます！
    </div>
  </div>
</div>

CSSコード表示

.wnw1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wnw1-radio {
  display: none;
}

.wnw1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wnw1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wnw1-normal:checked ~ .wnw1-controls [for="wnw1-normal"] {
  background-color: #dc3545;
  color: white;
}

#wnw1-nowrap:checked ~ .wnw1-controls [for="wnw1-nowrap"] {
  background-color: #0d6efd;
  color: white;
}

.wnw1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wnw1-box {
  width: 100%;
  max-width: 250px; /* わざと幅を狭くしています */
  background-color: #e3f2fd;
  border: 2px solid #0d6efd;
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ❌ normal（初期値：折り返す） */
#wnw1-normal:checked ~ .wnw1-demo-area .target-box-wnw1 {
  white-space: normal;
}

/* ⭕️ nowrap（絶対に折り返さない） */
#wnw1-nowrap:checked ~ .wnw1-demo-area .target-box-wnw1 {
  white-space: nowrap;
  background-color: #d1e7dd;
  border-color: #198754;
  color: #0f5132;
}

枠を突き破って横揺れする

nowrapを使う際、「改行されなくなったテキストが親の枠を右に突き破り、スマホで見た時に画面が左右に揺れる原因になる」ことがあります。

これを防ぐためには、nowrapは単独で使うのではなく、はみ出た部分をコントロールするoverflowプロパティ（hiddenやauto）とセットで使うのがよいです。

❌ nowrap単体 (枠を突き破る！) ⭕️ overflow: auto; を追加 (解決！)

【重要なお知らせ】このテキストは改行されないため、設定を間違えると枠を完全に突き破ってしまいます！

HTMLコード表示

<div class="wnw2-wrapper">
  <input type="radio" name="wnw2-state" id="wnw2-bad" class="wnw2-radio" checked>
  <input type="radio" name="wnw2-state" id="wnw2-good" class="wnw2-radio">

  <div class="wnw2-controls">
    <label for="wnw2-bad" class="wnw2-btn">❌ nowrap単体 (枠を突き破る！)</label>
    <label for="wnw2-good" class="wnw2-btn">⭕️ overflow: auto; を追加 (解決！)</label>
  </div>

  <div class="wnw2-demo-area">
    
    <div class="wnw2-box target-box-wnw2">
      【重要なお知らせ】このテキストは改行されないため、設定を間違えると枠を完全に突き破ってしまいます！
    </div>

  </div>
</div>

CSSコード表示

.wnw2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
  overflow: hidden; /* デモエリア外への突き破り防止 */
}

.wnw2-radio {
  display: none;
}

.wnw2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wnw2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wnw2-bad:checked ~ .wnw2-controls [for="wnw2-bad"] {
  background-color: #dc3545;
  color: white;
}

#wnw2-good:checked ~ .wnw2-controls [for="wnw2-good"] {
  background-color: #198754;
  color: white;
}

.wnw2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: flex-start; /* 左寄せ */
}

.wnw2-box {
  width: 200px; /* 親の枠を200pxに固定 */
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #dc3545;
  /* 改行させない指定だけしている */
  white-space: nowrap; 
}

/* ⭕️ 解決策：はみ出た部分をどうするか（overflow）を一緒に指定する */
#wnw2-good:checked ~ .wnw2-demo-area .target-box-wnw2 {
  overflow: auto; /* はみ出た部分はスクロールさせる */
  background-color: #d1e7dd;
  border-color: #198754;
  color: #0f5132;
}

overflowプロパティの使い方やhidden・scroll・autoなどの使い分けを知りたい人は「【html&css】overflowの使い方とhiddenやscrollの使い分け」を一読ください。

【html&css】overflowの使い方とhiddenやscrollの使い分け

スマホで「ボタンの文字が変に改行される」を防ぐ

実務においてnowrapが利用する一つの場面が「ボタンやバッジのテキスト」です。

PCの広い画面では見えていた「お問い合わせボタン」も、スマホの画面で見ると「お問い合わせ」のように、変な位置で改行されて不格好になります。

ボタンに対してwhite-space: nowrap;を指定すれば、画面が狭くなっても文字が1行のまま保たれてUIを維持できます。

❌ 指定なし (変な位置で改行される) ⭕️ nowrapを指定 (ボタンの形を死守！)

詳細を見るお問い合わせ

HTMLコード表示

<div class="wnw3-wrapper">
  <input type="radio" name="wnw3-state" id="wnw3-bad" class="wnw3-radio" checked>
  <input type="radio" name="wnw3-state" id="wnw3-good" class="wnw3-radio">

  <div class="wnw3-controls">
    <label for="wnw3-bad" class="wnw3-btn">❌ 指定なし (変な位置で改行される)</label>
    <label for="wnw3-good" class="wnw3-btn">⭕️ nowrapを指定 (ボタンの形を死守！)</label>
  </div>

  <div class="wnw3-demo-area">
    <div class="wnw3-narrow-container">
      <div class="wnw3-flex-buttons">
        <a href="#" class="wnw3-button target-btn-wnw3">詳細を見る</a>
        <a href="#" class="wnw3-button target-btn-wnw3">お問い合わせ</a>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.wnw3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wnw3-radio {
  display: none;
}

.wnw3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wnw3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wnw3-bad:checked ~ .wnw3-controls [for="wnw3-bad"] {
  background-color: #dc3545;
  color: white;
}

#wnw3-good:checked ~ .wnw3-controls [for="wnw3-good"] {
  background-color: #198754;
  color: white;
}

.wnw3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wnw3-narrow-container {
  width: 180px; 
  background-color: #eee;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto; 
}

.wnw3-flex-buttons {
  display: flex;
  gap: 10px;
}

.wnw3-button {
  background-color: #0d6efd;
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

#wnw3-bad:checked ~ .wnw3-demo-area .target-btn-wnw3 {
  white-space: normal;
}

#wnw3-good:checked ~ .wnw3-demo-area .target-btn-wnw3 {
  white-space: nowrap;
  background-color: #198754;
}

white-space: pre;とは

white-space: pre;の「pre」は「preformatted（プレフォーマット＝整形済み）」の略です。

HTMLの<pre>タグと同じ役割を持ちます。

preの特徴は、「HTMLエディタ上に書かれた半角スペースや改行をそのままブラウザ上に表示する」という点です。

white-space: pre;

エディタの改行・空白をそのまま表示
preを指定すると文字がはみ出す（折り返さない）
preとpre-wrapの違い

エディタの改行・空白をそのまま表示

初期値のnormalは、いくらスペースキーを連打しても、Enterキーで改行しても「1つの半角スペース」に圧縮されてしまいます。

しかしwhite-space: pre;を指定すると、圧縮機能がオフになります。

つまり、アスキーアート（文字絵）やプログラムのソースコードなど、「空白の数や改行の位置そのものに意味があるテキスト」を意図した通りのレイアウトで出力できます。

❌ normal (空白・改行が消えて崩れる) ⭕️ pre (そのままのレイアウトを維持！)

【本日のスケジュール】 09:00 – 出社・メールチェック 10:00 – 朝礼 13:00 – クライアントMTG 18:00 – 退社

HTMLコード表示

<div class="wp1-wrapper">
  <input type="radio" name="wp1-state" id="wp1-normal" class="wp1-radio" checked>
  <input type="radio" name="wp1-state" id="wp1-pre" class="wp1-radio">

  <div class="wp1-controls">
    <label for="wp1-normal" class="wp1-btn">❌ normal (空白・改行が消えて崩れる)</label>
    <label for="wp1-pre" class="wp1-btn">⭕️ pre (そのままのレイアウトを維持！)</label>
  </div>

  <div class="wp1-demo-area">
    <div class="wp1-box target-box-wp1">
      【本日のスケジュール】
        09:00 - 出社・メールチェック
        10:00 - 朝礼
        13:00 - クライアントMTG
        18:00 - 退社
    </div>
  </div>
</div>

CSSコード表示

.wp1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wp1-radio {
  display: none;
}

.wp1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wp1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wp1-normal:checked ~ .wp1-controls [for="wp1-normal"] {
  background-color: #dc3545;
  color: white;
}

#wp1-pre:checked ~ .wp1-controls [for="wp1-pre"] {
  background-color: #0d6efd;
  color: white;
}

.wp1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.wp1-box {
  width: 100%;
  max-width: 350px;
  background-color: #333;
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  color: #0dfd4b;
  line-height: 1.5;
  font-family: monospace; /* 等幅フォントで揃える */
}

/* ❌ normal：改行も空白も無視されるので1行に潰れてしまう */
#wp1-normal:checked ~ .wp1-demo-area .target-box-wp1 {
  white-space: normal;
}

/* ⭕️ pre：改行も空白も維持され、整ったスケジュール表になる */
#wp1-pre:checked ~ .wp1-demo-area .target-box-wp1 {
  white-space: pre;
}

preを指定すると文字がはみ出す（折り返さない）

pre は、「どれだけ文章が長くても、Enterキー（改行コード）を打たない限り、親の枠の右端に来ても自動で折り返さない」というルールがあります。

そのため、改行なしの長文が入力されると枠を右に大きく突き破ります。

❌ pre単体 (枠を突き破る！) ⭕️ overflow: auto を併用 (横スクロール)

【警告】preを指定すると改行は維持されますが、自分で改行を入れない限り枠の右端で自動的に折り返してくれません！このように枠を突き破ってしまいます。

HTMLコード表示

<div class="wp2-wrapper">
  <input type="radio" name="wp2-state" id="wp2-bad" class="wp2-radio" checked>
  <input type="radio" name="wp2-state" id="wp2-good" class="wp2-radio">

  <div class="wp2-controls">
    <label for="wp2-bad" class="wp2-btn">❌ pre単体 (枠を突き破る！)</label>
    <label for="wp2-good" class="wp2-btn">⭕️ overflow: auto を併用 (横スクロール)</label>
  </div>

  <div class="wp2-demo-area">
    <div class="wp2-container target-container-wp2">
      <div class="wp2-box target-box-wp2">
        【警告】preを指定すると改行は維持されますが、自分で改行を入れない限り枠の右端で自動的に折り返してくれません！このように枠を突き破ってしまいます。
      </div>
    </div>
  </div>
</div>

CSSコード表示

.wp2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
  overflow: hidden; /* デモエリア外への突き破り防止 */
}

.wp2-radio {
  display: none;
}

.wp2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wp2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wp2-bad:checked ~ .wp2-controls [for="wp2-bad"] {
  background-color: #dc3545;
  color: white;
}

#wp2-good:checked ~ .wp2-controls [for="wp2-good"] {
  background-color: #198754;
  color: white;
}

.wp2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: flex-start;
}

.wp2-container {
  width: 250px; /* 親の枠をあえて狭く固定 */
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
}

.wp2-box {
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #dc3545;
  /* preを指定しているため端で折り返さない */
  white-space: pre; 
}

/* ⭕️ 親コンテナにはみ出し部分の横スクロールを許可する */
#wp2-good:checked ~ .wp2-demo-area .target-container-wp2 {
  overflow-x: auto;
  background-color: #d1e7dd;
  border-color: #198754;
}

#wp2-good:checked ~ .wp2-demo-area .target-box-wp2 {
  color: #0f5132;
}

overflowの使い方を詳細に知りたい人は「【html&css】overflowの使い方とhiddenやscrollの使い分け」を一読ください。

【html&css】overflowの使い方とhiddenやscrollの使い分け

preとpre-wrapの違い

preは自動で折り返してくれないため、ユーザーが自由に入力するプロフィール文や掲示板のコメントなどに使うと、スマホ表示で画面が揺れる原因を引き起こします。

そこで、テキスト表示においてwhite-space: pre-wrap;（プレ・ラップ）を利用します。

pre
改行を維持するが、枠の端で折り返さない。
pre-wrap
改行を維持しつつ、枠の端に来たら自動で折り返してくれる。

❌ pre (枠を突き破る) ✨ pre-wrap (改行維持＋安全に折り返す)

ユーザーコメント

こんにちは！いつも記事を楽しく読ませていただいております。特に前回のCSSに関する解説がとても分かりやすくて、実務ですぐに活かすことができました。これからも更新を楽しみにしています！

HTMLコード表示

<div class="wp3-wrapper">
  <input type="radio" name="wp3-state" id="wp3-pre" class="wp3-radio" checked>
  <input type="radio" name="wp3-state" id="wp3-prewrap" class="wp3-radio">

  <div class="wp3-controls">
    <label for="wp3-pre" class="wp3-btn">❌ pre (枠を突き破る)</label>
    <label for="wp3-prewrap" class="wp3-btn">✨ pre-wrap (改行維持＋安全に折り返す)</label>
  </div>

  <div class="wp3-demo-area">
    <div class="wp3-card">
      <div class="wp3-header">ユーザーコメント</div>
      <div class="wp3-content target-content-wp3">
        こんにちは！
        いつも記事を楽しく読ませていただいております。
        
        特に前回のCSSに関する解説がとても分かりやすくて、実務ですぐに活かすことができました。これからも更新を楽しみにしています！
      </div>
    </div>
  </div>
</div>

CSSコード表示

.wp3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
  overflow: hidden;
}

.wp3-radio {
  display: none;
}

.wp3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wp3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wp3-pre:checked ~ .wp3-controls [for="wp3-pre"] {
  background-color: #dc3545;
  color: white;
}

#wp3-prewrap:checked ~ .wp3-controls [for="wp3-prewrap"] {
  background-color: #198754;
  color: white;
}

.wp3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

/* スマホ幅を想定したカード */
.wp3-card {
  width: 250px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wp3-header {
  background-color: #0d6efd;
  color: white;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}

.wp3-content {
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ❌ preのせいで長文が折り返さずはみ出す */
#wp3-pre:checked ~ .wp3-demo-area .target-content-wp3 {
  white-space: pre;
}

/* ✨ pre-wrapで改行を活かしつつ、端で安全に折り返す */
#wp3-prewrap:checked ~ .wp3-demo-area .target-content-wp3 {
  white-space: pre-wrap;
  background-color: #f8fff9;
}

white-space: pre-wrap;とは

white-space: pre-wrap;は、改行や半角スペースがブラウザ表示にそのまま反映され、要素の端で行が折り返されるという性質を持つ値です。

ユーザーが入力したお問い合わせ内容やプロフィール文・掲示板のコメントなどを画面に表示する際、実務でpre-wrapが使われます。

white-space: pre-wrap;

改行を維持しつつ端で「自動で折り返し」する
長いURLのはみ出しとoverflow-wrapの併用
pre-wrapとpre-lineの違い

改行を維持しつつ端で「自動で折り返し」する

初期値のnormalは改行を無視して圧縮してしまい、preは改行を維持しますが枠の端で突き破るという弱点があります。

この2つの「いいとこ取り」をしたのがpre-wrapです。

「HTMLエディタに書かれた改行や空白をそのまま画面に反映しつつ、親の枠の右端に到達したら、突き破らず自動で折り返す」という動きをします。

❌ normal (改行が消えてしまう) ⭕️ pre-wrap (改行維持＆安全に折り返し！)

皆様、こんにちは！本日はご訪問いただき、誠にありがとうございます。この文章は、画面の端まで到達すると自動的に下の行へと折り返されます。スマホのような狭い画面でも絶対に枠を突き破りません！

HTMLコード表示

<div class="wpw1-wrapper">
  <input type="radio" name="wpw1-state" id="wpw1-normal" class="wpw1-radio" checked>
  <input type="radio" name="wpw1-state" id="wpw1-prewrap" class="wpw1-radio">

  <div class="wpw1-controls">
    <label for="wpw1-normal" class="wpw1-btn">❌ normal (改行が消えてしまう)</label>
    <label for="wpw1-prewrap" class="wpw1-btn">⭕️ pre-wrap (改行維持 ＆ 安全に折り返し！)</label>
  </div>

  <div class="wpw1-demo-area">
    <div class="wpw1-box target-box-wpw1">
      皆様、こんにちは！
      
      本日はご訪問いただき、誠にありがとうございます。
      この文章は、画面の端まで到達すると自動的に下の行へと折り返されます。
      
      スマホのような狭い画面でも絶対に枠を突き破りません！
    </div>
  </div>
</div>

CSSコード表示

.wpw1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wpw1-radio {
  display: none;
}

.wpw1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wpw1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wpw1-normal:checked ~ .wpw1-controls [for="wpw1-normal"] {
  background-color: #dc3545;
  color: white;
}

#wpw1-prewrap:checked ~ .wpw1-controls [for="wpw1-prewrap"] {
  background-color: #198754;
  color: white;
}

.wpw1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wpw1-box {
  width: 100%;
  max-width: 250px; /* スマホ幅を想定 */
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ❌ normal：改行が無視されて1つの塊になる */
#wpw1-normal:checked ~ .wpw1-demo-area .target-box-wpw1 {
  white-space: normal;
}

/* ⭕️ pre-wrap：改行が反映され、かつ枠内に収まる */
#wpw1-prewrap:checked ~ .wpw1-demo-area .target-box-wpw1 {
  white-space: pre-wrap;
  background-color: #f8fff9;
  border-color: #198754;
}

長いURLのはみ出しとoverflow-wrapの併用

white-space: pre-wrap;を指定しても、スペースを含まない長いURLや連続した英数字は自動で折り返されず、親要素の幅をはみ出します。

これは、ブラウザが単語の区切り（スペース等）でのみ改行を判定するためです。

これを防ぐためには、単語の途中でも強制的に改行させるoverflow-wrap: anywhere;（またはbreak-word;）を併用する必要があります。

実務においてユーザーが入力したテキストを表示する際は、これらをセットで指定することが基本になります。

pre-wrap単体 (枠を突き破る) overflow-wrap併用 (枠内に収まる)

参考記事はこちらです。 https://thisisaveryveryverylongurlexamplefortestingcsslayoutbreakcom/article

HTMLコード表示

<div class="wpw2-wrapper">
  <input type="radio" name="wpw2-state" id="wpw2-bad" class="wpw2-radio" checked>
  <input type="radio" name="wpw2-state" id="wpw2-good" class="wpw2-radio">

  <div class="wpw2-controls">
    <label for="wpw2-bad" class="wpw2-btn">pre-wrap単体 (枠を突き破る)</label>
    <label for="wpw2-good" class="wpw2-btn">overflow-wrap併用 (枠内に収まる)</label>
  </div>

  <div class="wpw2-demo-area">
    <div class="wpw2-container target-container-wpw2">
      <div class="wpw2-box target-box-wpw2">
        参考記事はこちらです。
        
        https://thisisaveryveryverylongurlexamplefortestingcsslayoutbreakcom/article
      </div>
    </div>
  </div>
</div>

CSSコード表示

.wpw2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wpw2-radio {
  display: none;
}

.wpw2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wpw2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wpw2-bad:checked ~ .wpw2-controls [for="wpw2-bad"] {
  background-color: #dc3545;
  color: white;
}

#wpw2-good:checked ~ .wpw2-controls [for="wpw2-good"] {
  background-color: #198754;
  color: white;
}

.wpw2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
}

.wpw2-container {
  width: 180px;
  background-color: #f8f9fa;
  border-right: 3px solid #dc3545;
  padding: 10px 10px 10px 0;
  box-sizing: border-box;
}

.wpw2-box {
  width: 100%;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  overflow: visible;
}

/* ❌ pre-wrap単体：枠を突き破る */
#wpw2-bad:checked ~ .wpw2-demo-area .target-box-wpw2 {
  white-space: pre-wrap;
}

/* ⭕️ overflow-wrap併用：ボックス内で強制的に改行される */
#wpw2-good:checked ~ .wpw2-demo-area .target-container-wpw2 {
  border-right-color: #198754;
}

#wpw2-good:checked ~ .wpw2-demo-area .target-box-wpw2 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background-color: #d1e7dd;
  border-color: #198754;
}

overflowの使い方や代表的な値の使い分けを知りたい人は「【html&css】overflowの使い方とhiddenやscrollの使い分け」を一読ください。

【html&css】overflowの使い方とhiddenやscrollの使い分け

pre-wrapとpre-lineの違いと使い分け

pre-wrapとpre-lineは、どちらも「改行を維持し、右端で自動的に折り返す」という点で共通しますが、「連続した半角スペース（空白）」の処理方法が異なります。

pre-wrap：入力された連続スペースをそのまま維持して表示します。
pre-line：入力された連続スペースを1つの半角スペースに圧縮して表示します。

ユーザーの入力内容をそのまま再現したい場合はpre-wrap、不要な連続スペースを詰めて表示を整えたい場合はpre-lineを選択します。

pre-wrap (空白を維持) pre-line (空白を圧縮)

商品名：高級メロン産地：静岡県 ※連続した半角スペースが含まれるテキストです。

HTMLコード表示

<div class="wpw3-wrapper">
  <input type="radio" name="wpw3-state" id="wpw3-prewrap" class="wpw3-radio" checked>
  <input type="radio" name="wpw3-state" id="wpw3-preline" class="wpw3-radio">

  <div class="wpw3-controls">
    <label for="wpw3-prewrap" class="wpw3-btn">pre-wrap (空白を維持)</label>
    <label for="wpw3-preline" class="wpw3-btn">pre-line (空白を圧縮)</label>
  </div>

  <div class="wpw3-demo-area">
    <div class="wpw3-box target-box-wpw3">
      商品名：      高級メロン
      産地：        静岡県
      
      ※連続した半角スペースが含まれるテキストです。
    </div>
  </div>
</div>

CSSコード表示

.wpw3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wpw3-radio {
  display: none;
}

.wpw3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wpw3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wpw3-prewrap:checked ~ .wpw3-controls [for="wpw3-prewrap"] {
  background-color: #198754;
  color: white;
}

#wpw3-preline:checked ~ .wpw3-controls [for="wpw3-preline"] {
  background-color: #0dcaf0;
  color: white;
}

.wpw3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wpw3-box {
  width: 100%;
  max-width: 300px;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ⭕️ pre-wrap：連続スペースをそのまま表示 */
#wpw3-prewrap:checked ~ .wpw3-demo-area .target-box-wpw3 {
  white-space: pre-wrap;
  background-color: #f8fff9;
  border-color: #198754;
}

/* ⭕️ pre-line：連続スペースを1つに圧縮 */
#wpw3-preline:checked ~ .wpw3-demo-area .target-box-wpw3 {
  white-space: pre-line;
  background-color: #f0fdfa;
  border-color: #0dcaf0;
}

white-space: pre-line;とは

white-space: pre-line;は、HTML内の「改行」をそのまま表示しつつ、連続する「空白（スペースやタブ）」を1つの半角スペースに圧縮するプロパティです。

テキストが要素の右端に到達した場合は、自動的に折り返されます。

不要な空白を削除して文章を整え、改行だけは意図した通りに反映させたい場合に機能します。

white-space: pre-line;

改行を維持して連続する空白を圧縮する
スペースキーによる字下げ（インデント）が効かない
入力フォームにおけるpre-lineとpre-wrapの選択ミス

改行を維持して連続する空白を圧縮する

初期値であるnormalは改行も空白も圧縮しますが、pre-lineを指定すると改行のみが維持されます。

HTMLコード上で視認性を高めるために空けたインデント（連続する空白）は圧縮されるため、画面上でテキストが左に寄って表示されます。

normal (改行も空白も圧縮) pre-line (改行のみ維持)

第一章吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

HTMLコード表示

<div class="wpl1-wrapper">
  <input type="radio" name="wpl1-state" id="wpl1-normal" class="wpl1-radio" checked>
  <input type="radio" name="wpl1-state" id="wpl1-preline" class="wpl1-radio">

  <div class="wpl1-controls">
    <label for="wpl1-normal" class="wpl1-btn">normal (改行も空白も圧縮)</label>
    <label for="wpl1-preline" class="wpl1-btn">pre-line (改行のみ維持)</label>
  </div>

  <div class="wpl1-demo-area">
    <div class="wpl1-box target-box-wpl1">
      第一章
      
            吾輩は猫である。
            名前はまだ無い。
            
            どこで生れたかとんと見当がつかぬ。
    </div>
  </div>
</div>

CSSコード表示

.wpl1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wpl1-radio {
  display: none;
}

.wpl1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wpl1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wpl1-normal:checked ~ .wpl1-controls [for="wpl1-normal"] {
  background-color: #dc3545;
  color: white;
}

#wpl1-preline:checked ~ .wpl1-controls [for="wpl1-preline"] {
  background-color: #0dcaf0;
  color: white;
}

.wpl1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wpl1-box {
  width: 100%;
  max-width: 300px;
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* normal：すべてが圧縮される */
#wpl1-normal:checked ~ .wpl1-demo-area .target-box-wpl1 {
  white-space: normal;
}

/* pre-line：改行は維持されるが、行頭の空白（インデント）は消去される */
#wpl1-preline:checked ~ .wpl1-demo-area .target-box-wpl1 {
  white-space: pre-line;
  background-color: #f0fdfa;
  border-color: #0dcaf0;
}

スペースキーによる字下げ（インデント）が効かない

初心者が陥りやすいミスとして、段落の先頭を1文字分空ける（字下げする）目的でスペースキーを入力し、それが画面に反映されないという問題があります。

white-space: pre-line;は連続する空白だけでなく、行頭の空白も圧縮して削除する仕様があります。

字下げを行いたい場合は、空白文字を使用するのではなくCSSのtext-indentプロパティを使用するのが適切な設計です。

半角スペースで字下げ (無効) text-indentで字下げ (有効)

ここは段落の先頭です。HTMLエディタ上で文頭に半角スペースを複数入力して字下げを試みていますが、pre-lineの仕様により行頭の空白はすべて削除され、左端に詰まって表示されます。字下げを行う場合はCSSを使用するのが正しい設計です。

HTMLコード表示

<div class="wpl2-wrapper">
  <input type="radio" name="wpl2-state" id="wpl2-bad" class="wpl2-radio" checked>
  <input type="radio" name="wpl2-state" id="wpl2-good" class="wpl2-radio">

  <div class="wpl2-controls">
    <label for="wpl2-bad" class="wpl2-btn">半角スペースで字下げ (無効)</label>
    <label for="wpl2-good" class="wpl2-btn">text-indentで字下げ (有効)</label>
  </div>

  <div class="wpl2-demo-area">
    <div class="wpl2-box target-box-wpl2">          ここは段落の先頭です。HTMLエディタ上で文頭に半角スペースを複数入力して字下げを試みていますが、pre-lineの仕様により行頭の空白はすべて削除され、左端に詰まって表示されます。字下げを行う場合はCSSを使用するのが正しい設計です。</div>
  </div>
</div>

CSSコード表示

.wpl2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wpl2-radio {
  display: none;
}

.wpl2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wpl2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wpl2-bad:checked ~ .wpl2-controls [for="wpl2-bad"] {
  background-color: #dc3545;
  color: white;
}

#wpl2-good:checked ~ .wpl2-controls [for="wpl2-good"] {
  background-color: #198754;
  color: white;
}

.wpl2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wpl2-box {
  width: 100%;
  max-width: 350px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  white-space: pre-line; /* 共通指定：改行維持、空白圧縮 */
}

/* ❌ 失敗例：行頭の半角スペースは削除され、字下げが行われない */
#wpl2-bad:checked ~ .wpl2-demo-area .target-box-wpl2 {
  text-indent: 0;
}

/* ⭕️ 成功例：CSSの text-indent により、正確に1文字分の字下げが行われる */
#wpl2-good:checked ~ .wpl2-demo-area .target-box-wpl2 {
  text-indent: 1em;
  border-color: #198754;
  background-color: #f8fff9;
}

入力フォームにおけるpre-lineとpre-wrapの選択ミス

実務において、<textarea> などからユーザーが入力したテキストを画面に出力する際、pre-lineを選択すると意図しないレイアウト変更を引き起こすミスが発生します。

ユーザーが名前と値の間を揃えるために意図的に入力したスペース（例: 電話番号： 090-XXXX）も、pre-line は仕様通りに「1つの半角スペース」に圧縮します。

ユーザーの入力した空白を含めて再現したい場合はpre-wrapを指定し、不要な連続スペースを自動で削除しデータを出力したい場合のみpre-lineを指定するのが正しい使い分けです。

pre-line (意図的な空白が圧縮される) pre-wrap (ユーザーの入力を再現)

【お問い合わせ内容】氏名：山田太郎部署：営業部要件：見積もりのご依頼

HTMLコード表示

<div class="wpl3-wrapper">
  <input type="radio" name="wpl3-state" id="wpl3-preline" class="wpl3-radio" checked>
  <input type="radio" name="wpl3-state" id="wpl3-prewrap" class="wpl3-radio">

  <div class="wpl3-controls">
    <label for="wpl3-preline" class="wpl3-btn">pre-line (意図的な空白が圧縮される)</label>
    <label for="wpl3-prewrap" class="wpl3-btn">pre-wrap (ユーザーの入力を再現)</label>
  </div>

  <div class="wpl3-demo-area">
    <div class="wpl3-box target-box-wpl3">
      【お問い合わせ内容】
      
      氏名：      山田 太郎
      部署：      営業部
      要件：      見積もりのご依頼
    </div>
  </div>
</div>

CSSコード表示

.wpl3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wpl3-radio {
  display: none;
}

.wpl3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wpl3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wpl3-preline:checked ~ .wpl3-controls [for="wpl3-preline"] {
  background-color: #dc3545;
  color: white;
}

#wpl3-prewrap:checked ~ .wpl3-controls [for="wpl3-prewrap"] {
  background-color: #198754;
  color: white;
}

.wpl3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wpl3-box {
  width: 100%;
  max-width: 350px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  font-family: monospace;
}

/* ❌ pre-line：ユーザーが意図的に入力したスペースを圧縮してしまう */
#wpl3-preline:checked ~ .wpl3-demo-area .target-box-wpl3 {
  white-space: pre-line;
  background-color: #fff3cd;
  border-color: #ffc107;
}

/* ⭕️ pre-wrap：スペースを維持し、ユーザーの入力意図を再現する */
#wpl3-prewrap:checked ~ .wpl3-demo-area .target-box-wpl3 {
  white-space: pre-wrap;
  background-color: #f8fff9;
  border-color: #198754;
}

white-space: break-spaces;とは

white-space: break-spaces;は、CSS Text Module Level 3 で追加された比較的新しい値です。

基本的にpre-wrapと同様「HTML上の改行と連続する空白を維持し、親要素の右端でテキストを折り返す」という動作をします。

しかし、「行末にある連続した空白（スペース）」の処理方法において、pre-wrapと明確な違いを持ちます。

特定のレイアウト要件を満たすために使用されますが、仕様を理解せずに指定すると予期せぬ余白が発生する原因となります。

white-space: break-spaces;

改行と空白を維持して折り返す
pre-wrapとの違いは行末の空白
不要な余白の発生とユースケース

改行と空白を維持して折り返す

break-spacesは、normalでは圧縮されてしまう改行や空白をそのまま画面に反映し、テキストがコンテナの幅を超えた場合に自動的に折り返します。

この基本的な挙動はpre-wrapと同一です。

normal (空白・改行を圧縮) break-spaces (維持して折り返し)

HTML上の連続する空白や改行が維持され、端で折り返されます。

HTMLコード表示

<div class="wbs1-wrapper">
  <input type="radio" name="wbs1-state" id="wbs1-normal" class="wbs1-radio" checked>
  <input type="radio" name="wbs1-state" id="wbs1-breakspaces" class="wbs1-radio">

  <div class="wbs1-controls">
    <label for="wbs1-normal" class="wbs1-btn">normal (空白・改行を圧縮)</label>
    <label for="wbs1-breakspaces" class="wbs1-btn">break-spaces (維持して折り返し)</label>
  </div>

  <div class="wbs1-demo-area">
    <div class="wbs1-box target-box-wbs1">
      HTML上の      連続する空白や
      
      改行が維持され、端で折り返されます。
    </div>
  </div>
</div>

CSSコード表示

.wbs1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wbs1-radio {
  display: none;
}

.wbs1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wbs1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wbs1-normal:checked ~ .wbs1-controls [for="wbs1-normal"] {
  background-color: #dc3545;
  color: white;
}

#wbs1-breakspaces:checked ~ .wbs1-controls [for="wbs1-breakspaces"] {
  background-color: #6f42c1;
  color: white;
}

.wbs1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wbs1-box {
  width: 100%;
  max-width: 250px;
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* normal：すべてが圧縮される */
#wbs1-normal:checked ~ .wbs1-demo-area .target-box-wbs1 {
  white-space: normal;
}

/* break-spaces：改行と空白が維持され、折り返される */
#wbs1-breakspaces:checked ~ .wbs1-demo-area .target-box-wbs1 {
  white-space: break-spaces;
  background-color: #e2d9f3;
  border-color: #6f42c1;
}

pre-wrapとの違いは行末の空白

pre-wrapとbreak-spacesの最大の仕様の違いは、「行の末尾にある連続した空白（スペース）を折り返すかどうか」です。

pre-wrapの仕様
行末の空白は、コンテナの右端を越えても折り返されず、枠外に「ぶら下がる（はみ出す）」形で処理されます。
そのため、空白によって要素の高さ（行数）が拡張されることはありません。
break-spaces の仕様
行末の空白も「文字」として空間を計算します。
コンテナの右端に到達すると、空白の連続であっても次の行へ折り返されます。
結果、空白によって要素の高さ（行数）が拡張されます。

pre-wrap (空白はぶら下がる) break-spaces (空白も折り返す)

文字列の後に空白が続きます。

HTMLコード表示

<div class="wbs2-wrapper">
  <input type="radio" name="wbs2-state" id="wbs2-prewrap" class="wbs2-radio" checked>
  <input type="radio" name="wbs2-state" id="wbs2-breakspaces" class="wbs2-radio">

  <div class="wbs2-controls">
    <label for="wbs2-prewrap" class="wbs2-btn">pre-wrap (空白はぶら下がる)</label>
    <label for="wbs2-breakspaces" class="wbs2-btn">break-spaces (空白も折り返す)</label>
  </div>

  <div class="wbs2-demo-area">
    <div class="wbs2-box target-box-wbs2">
      文字列の後に空白が続きます。                                        
    </div>
  </div>
</div>

CSSコード表示

.wbs2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wbs2-radio {
  display: none;
}

.wbs2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wbs2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wbs2-prewrap:checked ~ .wbs2-controls [for="wbs2-prewrap"] {
  background-color: #198754;
  color: white;
}

#wbs2-breakspaces:checked ~ .wbs2-controls [for="wbs2-breakspaces"] {
  background-color: #6f42c1;
  color: white;
}

.wbs2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wbs2-box {
  width: 150px; /* 違いを明確にするため幅を狭く設定 */
  padding: 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  font-family: monospace;
  /* 空白の領域を視覚化するための背景設定 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 100% 1.6em;
}

/* pre-wrap：行末の空白は枠外に配置され、改行されないため高さは変わらない */
#wbs2-prewrap:checked ~ .wbs2-demo-area .target-box-wbs2 {
  white-space: pre-wrap;
  background-color: #f8fff9;
  border: 1px solid #198754;
}

/* break-spaces：行末の空白も折り返されるため、行数が増えてボックスが高くなる */
#wbs2-breakspaces:checked ~ .wbs2-demo-area .target-box-wbs2 {
  white-space: break-spaces;
  background-color: #e2d9f3;
  border: 1px solid #6f42c1;
}

不要な余白の発生とユースケース

ユーザーが自由に入力できるフォームの出力において、安易にbreak-spacesを使用すると実務上の問題が発生します。

ユーザーが入力の最後にスペースキーを押してしまった場合、break-spacesはスペースを改行として処理するため末尾に意図しない大きな空白が生成されます。

一般的なテキスト出力においてはpre-wrapを使用するのが標準であり、break-spacesは「ターミナルエミュレータの実装」や「スペースの数を視覚化する必要があるテキストエディタのUI」など、限定的なユースケースでのみ採用されます。

pre-wrap (標準的・余白なし) break-spaces (不要な余白が発生)

ありがとうございました！

HTMLコード表示

<div class="wbs3-wrapper">
  <input type="radio" name="wbs3-state" id="wbs3-prewrap" class="wbs3-radio" checked>
  <input type="radio" name="wbs3-state" id="wbs3-breakspaces" class="wbs3-radio">

  <div class="wbs3-controls">
    <label for="wbs3-prewrap" class="wbs3-btn">pre-wrap (標準的・余白なし)</label>
    <label for="wbs3-breakspaces" class="wbs3-btn">break-spaces (不要な余白が発生)</label>
  </div>

  <div class="wbs3-demo-area">
    <div class="wbs3-chat-container">
      <div class="wbs3-chat-bubble target-bubble-wbs3">
        ありがとうございました！                                    
      </div>
    </div>
  </div>
</div>

CSSコード表示

.wbs3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.wbs3-radio {
  display: none;
}

.wbs3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.wbs3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#wbs3-prewrap:checked ~ .wbs3-controls [for="wbs3-prewrap"] {
  background-color: #198754;
  color: white;
}

#wbs3-breakspaces:checked ~ .wbs3-controls [for="wbs3-breakspaces"] {
  background-color: #dc3545;
  color: white;
}

.wpl3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.wbs3-chat-container {
  width: 200px;
  background-color: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  justify-content: center;
  margin: 0 auto;
}

.wbs3-chat-bubble {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* pre-wrap：文末の空白は折り返されないため、吹き出しの高さは適切に保たれる */
#wbs3-prewrap:checked ~ .wbs3-demo-area .target-bubble-wbs3 {
  white-space: pre-wrap;
  border: 2px solid #198754;
}

/* break-spaces：文末の空白が折り返されるため、吹き出し下部に不要な余白が生まれる */
#wbs3-breakspaces:checked ~ .wbs3-demo-area .target-bubble-wbs3 {
  white-space: break-spaces;
  border: 2px solid #dc3545;
}

まとめ

それぞれの値が「改行」「連続する空白（スペース・タブ）」「自動折り返し」をどのように処理するかを一覧にまとめました。

指定する値	改行の扱い	連続する空白	自動折り返し
`normal` (初期値)	圧縮される	1つに圧縮	あり
`nowrap`	圧縮される	1つに圧縮	なし
`pre`	維持される	そのまま表示	なし
`pre-wrap`	維持される	そのまま表示	あり
`pre-lines`	維持される	1つに圧縮	あり
`break-spaces`	維持される	そのまま表示	あり