【white-space: nowrap】の基本とトラブル解決｜効かない・はみ出る場合の対処法

CSSのレイアウト調整でよく使われるプロパティのひとつが、white-space: nowrapです。

テキストを強制的に改行させず、横一列で表示できる便利な指定ですが、実際の使ってみると「文字がはみ出る」「効かない」「どうやって解除するの？」といったトラブルに遭遇することも少なくありません。

この記事では、white-space: nowrap の基本的な使い方から、よくあるエラーやはみ出しの原因、効かない場合のチェックポイント、解除方法までをわかりやすく解説します。

white-space: nowrapの基本と使い方

ブラウザは通常、テキストが要素の幅を超えると自動で折り返して表示します。
しかし、見出しやボタンラベルなど「1行で表示したい」ケースでは折り返しを禁止する必要があります。

このとき役立つのが white-space プロパティ です。

.sample {
  white-space: nowrap;
}

この指定をすると、テキストは強制的に横一列に表示、改行されません。

ただし、要素幅を超えた部分ははみ出してしまうため、overflow: hidden;やtext-overflow: ellipsis;と組み合わせて使うのが一般的です。

改行を禁止するシーンは限られますが、UIデザインや見出し調整の場面では知っておくと便利なプロパティです。

基本的な使用例

See the Pen knowledge_white-space-nowrap_001 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

具体的なユースケース

ECサイトの商品一覧では、商品名を途中で改行させると見た目が崩れることがあります。 そのため、テキストを1行で表示するケースがよくあります。

See the Pen knowledge_white-space-nowrap_002 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

white-spaceの主な値とnowrapとの違い

CSS の white-space には nowrap 以外にもいくつかの値があり、改行や空白の挙動がそれぞれ違います。表示したいテキストに合わせて最適な設定を選ぶことが大切です。

プロパティ値	動作	使用場面
normal	デフォルト。テキストは幅に応じて自動で折り返され、連続する空白は1つにまとめられる。	通常のテキスト
nowrap	改行を禁止。テキストは1行で表示され、要素幅を超える場合ははみ出す。	ボタンラベル、ナビゲーションメニュー、商品タイトル
pre	HTML内の空白や改行をそのまま保持して表示（折り返しもそのまま）。	ソースコード
pre-wrap	改行はそのまま保持しつつ、幅を超えた場合は自動折り返しされる。	契約書・規約
pre-line	連続する空白は1つにまとめるが、改行は保持して折り返す。	ユーザー投稿テキスト、コメント欄

プロパティごとの表示の違いを確認してみよう

See the Pen knowledge_white-space-nowrap_003 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

nowrapが効かないときの原因と優先度

white-space: nowrap; を設定しても意図通りに動かないことがあります。

原因を理解し、優先度を確認することで、問題を効率的に解決できます。

よくある原因

1. CSSセレクタの記述ミス
   クラス名やID名のスペルミス、親子関係の指定間違いなど。
2. CSSの読み込み順序の問題
   後から読み込まれたスタイルに上書きされている場合、nowrapが効かないことがあります。
   特に外部ライブラリやテーマCSSを使用している場合は注意しましょう。
3. CSS詳細度（Specificity）の不足
   他のスタイルに優先されている可能性があります。
   クラスよりID、インラインスタイルの方が優先度が高いため、必要に応じてセレクタを強化しましょう。

改行禁止テキストのはみ出し対策

はみ出すテキストを「…」で省略する方法

white-space: nowrap を適用したテキストは、要素幅を超えると横にはみ出してしまいます。
そんなときに便利なのがtext-overflow: ellipsis;です。

コンテナに収まらない部分を省略記号「…」で表示し、見た目を崩さずに収めることができます。

See the Pen Untitled by Yugo Harima (@yh-kasou-knowledge) on CodePen.

必須の設定ポイント

text-overflow: ellipsis を正しく動かすには、以下の3つの条件を揃える必要があります。

• white-space: nowrap; – テキストの折り返しを禁止
• overflow: hidden; – コンテナからはみ出た部分を隠す
• text-overflow: ellipsis; – 省略記号を表示

overflowプロパティで不要部分を隠す方法

改行禁止テキストは要素幅を超えると見た目が崩れます。
overflowプロパティを使うことで、余分にはみ出したテキストを隠し、レイアウトを崩さず整列させることが可能です。

See the Pen knowledge_white-space-nowrap_005 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

テーブル内のnowrapテキストを整列させる方法

テーブルのセルに長い文字列が入ると、行の高さや列幅が崩れてしまうことがあります。
この場合、列幅を固定したり、省略記号を使ったりして表示を調整することで、表全体の見た目を保つことができます。

See the Pen knowledge_white-space-nowrap_006 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

table-layout: fixed; で列幅を固定するとテーブル全体のレイアウトは安定します。
ただし、狭すぎる列では white-space: nowrap; により内容がはみ出すことがあるため、列幅調整や text-overflow: ellipsis; の併用が必要です。

改行禁止の解除方法

white-space: nowrap; を使って改行を禁止しているテキストも、場合によっては通常の折り返しに戻したいことがあります。

ここでは、改行禁止を解除する基本的な方法と応用例を解説します。

基本的な解除方法

改行禁止を解除したい場合は、基本的に white-space: normal; を指定します。

p {
  white-space: normal; /* 改行を許可 */
}

特定要素だけ解除する場合

親要素に white-space: nowrap; が設定されている場合、子要素だけ折り返しを許可したいことがあります。

この場合は、対象の要素をセレクタで限定して解除します。

.container {
  white-space: nowrap;
}
.container p {
  white-space: normal; /* この段落だけ折り返しを許可 */
}

レスポンシブ対応で改行禁止テキストを扱う方法

PCなど横幅の広い画面では1行表示を維持し、スマホや狭い画面では折り返しを許可できます。
これにより、テキストがはみ出して読みにくくなるのを防ぎます。

以下のCodePenのResult（プレビュー画面）の幅を広げて確認してみましょう。

See the Pen knowledge_white-space-nowrap_007 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

まとめ

white-space: nowrap は、テキストを1行で表示して改行を禁止するプロパティです。
見出しやタイトル、ボタンなどで便利ですが、要素幅を超えると横にはみ出すことがあります。

対策としては、overflow: hidden と text-overflow: ellipsis を組み合わせて省略表示にしたり、テーブルでは table-layout: fixed を使って列幅を安定させる方法があります。

nowrap が効かない場合は、セレクタの記述ミスや読み込み順序、CSS詳細度が原因のことが多いです。また、折り返しが必要な場合は white-space: normal に切り替えることで解除でき、レスポンシブ対応では画面幅に応じて切り替えるのが効果的です。

この記事の振り返りFAQ

関連リンク

• white-space – CSS: カスケーディングスタイルシート | MDN
  https://developer.mozilla.org/ja/docs/Web/CSS/white-space
• text-overflow – CSS: カスケーディングスタイルシート | MDN
  https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow