Webサイトを作成していると、
「テーブルの項目名が勝手に改行されてレイアウトが崩れる」
といった問題に直面することがあります。
HTMLは通常、親要素の幅に合わせて自動的にテキストを折り返しますが、デザインや可読性の観点から、この挙動を制御したい場面は多いです。
この記事では、CSSを使ってテキストの自動改行を禁止する基本的な方法から、テーブル（table）や特定の単語（span）などタグ別の適用例、さらに改行を禁止したことで発生する「はみ出し問題」の解決策まで、現在のWeb制作現場で使われているテクニックを徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
CSSで改行を禁止する基本テクニック（white-space: nowrap）
HTMLのテキストを強制的に1行で表示させたい場合、CSSの white-space プロパティを使用するのが鉄則です。
このプロパティは「空白文字や改行の扱い」を決めるもので、これを設定するだけで簡単に改行をコントロールできます。
基本的な書き方
対象の要素に white-space: nowrap; を指定します。
<p class="text-nowrap">
この文章は画面幅が狭くなっても絶対に改行されません。
</p>
<style>
.text-nowrap {
/* 自動的な折り返しを禁止する */
white-space: nowrap;
}
</style>
white-space プロパティの初期値は normal（自動で折り返す）ですが、これを nowrap（ノーラップ）に変更することで、親要素の幅を超えてもテキストが折り返されなくなります。
<br> タグを入れた場所では通常通り改行されますが、それ以外では1行で表示され続けます。
【タグ別】改行させない具体的な実装例
実際に white-space: nowrap; を使うシーンは、テーブルのセルやボタン、特定の固有名詞など多岐にわたります。 タグごとの具体的な実装パターンを見ていきましょう。
1. テーブルのセル（th, td）を改行させない
表組み（table）を作るとき、日付や項目名などの短いテキストが改行されると非常に読みづらくなります。 th や td タグに指定することで、スッキリとした表を維持できます。
<table>
<tr>
<th class="nowrap">更新日</th>
<td>2026年1月1日</td>
</tr>
</table>
<style>
.nowrap {
white-space: nowrap;
}
</style>
テーブルのヘッダー（th）にクラスを付与して改行を禁止しています。
これにより、画面幅が狭まっても「更新日」という文字が縦書きのように崩れるのを防げます。
レスポンシブデザインのテーブルにおいて必須のテクニックです。
2. divやpタグ内のテキストを1行に収める
見出しやキャッチコピーなど、デザイン上どうしても1行で見せたい場合に使います。
ただし、文章が長すぎると画面からはみ出して横スクロールが発生する原因になるため、後述する「はみ出し対策」とセットで使うのが一般的です。
<div class="box-title">
絶対に改行したくない重要なキャッチコピー
</div>
<style>
.box-title {
white-space: nowrap;
}
</style>
3. spanタグで「特定の単語」だけ改行を防ぐ
文章の途中で「Windows 11」や「10,000 円」といった単語が、行末で分断されるのを防ぎたい場合があります。
そんな時は、その単語だけを <span> タグで囲んで改行を禁止します。
<p>
最新のOSは<span class="word-keep">Windows 11</span>です。
</p>
<style>
.word-keep {
display: inline-block; /* 念のためインラインブロック化 */
white-space: nowrap;
}
</style>
特定の単語を span で囲み、そこだけ white-space: nowrap; を適用します。
これにより、その単語の途中で改行されることがなくなり、「Windows」と「11」が別々の行になるのを防げます。
display: inline-block; を併用すると、単語のまとまりとして扱いやすくなるため推奨されます。
改行させないことで発生する「はみ出し」への対策
改行を禁止すると、親要素の幅よりもテキストが長くなった場合に、テキストが枠を突き抜けて表示されてしまいます。
これを防ぐための2つの代表的な処理を紹介します。
1. はみ出した部分を「…（3点リーダー）」で省略する
ニュースの一覧やカード型デザインでよく見る表現です。
CSSで以下の3点セットを指定します。
.ellipsis {
width: 100%; /* 幅の指定が必須 */
white-space: nowrap; /* 1. 改行しない */
overflow: hidden; /* 2. はみ出た部分を隠す */
text-overflow: ellipsis; /* 3. 末尾を「...」にする */
}
text-overflow: ellipsis; は、隠れたテキストの末尾を「…」に変えるプロパティです。
これを使うには、必ず white-space: nowrap;（改行禁止）と overflow: hidden;（はみ出し非表示）をセットで記述する必要があります。
2. 横スクロールできるようにする
テーブルやコードブロックなど、内容は隠さずにすべて見せたい場合は、親要素にスクロール設定を加えます。
.scroll-box {
width: 100%;
white-space: nowrap; /* 中身は改行しない */
overflow-x: auto; /* 横方向にはみ出たらスクロール */
}
overflow-x: auto; を指定することで、ブラウザが必要だと判断した時だけ横スクロールバーが表示されます。
スマホ向けのテーブル実装で非常によく使われる手法です。
非推奨：HTMLのnobrタグは使わない
古いWebサイトのコードを見ると、<nobr> というタグを使って改行を禁止している場合があります。
しかし、これはHTMLの標準仕様には存在しない独自タグであり、現在は非推奨（廃止扱い）となっています。
今後のブラウザのアップデートで正しく動作しなくなる可能性があるため、必ずCSSの white-space: nowrap; を使用するようにしましょう。
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTML/CSSでテキストを改行させない方法について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
