CSSでテキストの折り返しを禁止する方法

ウェブサイトの制作過程において、テキストが意図しない位置で改行されてしまい、レイアウトが崩れる現象は頻繁に発生します。特にボタン内のラベルやナビゲーションメニューの項目は、一行で表示することが求められる要素です。

CSSのwhite-spaceプロパティにnowrap値を指定すると、テキストの自動折り返しを明示的に禁止できます。ただし、この指定は改行を止める仕組みであり、親要素の幅自体を無効化するわけではないため、文字数が多い場合はボックスからはみ出して表示される点に注意が必要です。

本記事では、初心者から実務者まで活用できる、折り返しを制御するための主要な手法に加え、はみ出したテキストを省略表示する対処法まで具体的に紹介します。

テキストの折り返しを禁止する主な方法は、以下の2つです。

1. white-spaceプロパティを指定する
2. displayプロパティで要素の性質を変更する

それぞれ対象となる範囲や仕組みが異なるため、目的に応じて使い分ける必要があります。使用するプロパティと主な用途をまとめた表は、以下の通りです。

この表からも分かる通り、テキスト単位で制御するか、要素全体のレイアウトで制御するかによって選ぶプロパティが変わります。それでは各項目について、詳しく解説していきます。

white-spaceプロパティを指定する

テキストの折り返し挙動を直接制御するプロパティとして、最も一般的に利用されるのが white-space です。このプロパティに nowrap という値を設定する手法により、テキストの自動改行を無効化できます。

.no-wrap {
  white-space: nowrap;
}

この設定を適用すると、通常の空白やソースコード上の改行はすべて半角スペース1つに折りたたまれ、自動改行が行われないまま単一行で横方向へ伸び続けます。

ソースの改行位置をそのまま維持したい場合に必要なのは、pre系の値の指定です。要素の幅を超えて伸びたテキストは親要素を突き抜けて表示されるため、overflowプロパティなどと併用してはみ出し箇所の見え方を調整するのが基本だと言えます。

displayプロパティで要素の性質を変更する

テキストそのものではなく、要素全体のレイアウト特性を変更して折り返しを防ぐアプローチも有効です。例えば、親要素にflexを指定すると、その直下の子要素は既定で横一列に並べられ、複数行への折り返しが抑止される仕組みです。

.container {
  display: flex;
}

flex-wrapプロパティは既定値がnowrapであるため、子要素自体は親要素の幅に合わせて圧縮されるか、あるいははみ出して一列に並ぶ挙動となります。ただし、この指定は子要素の配置を制御するものであり、各子要素内のテキストの折り返しを防ぐものではないため、文字列自体を折り返させたくない場合は、対象要素へ別途white-space: nowrapを指定する必要があります。

white-spaceプロパティにはnowrap以外にもいくつかの値が用意されており、値によって、改行や空白の扱いが異なる仕組みです。ここで取り上げるのは、代表的な2つの値です。

nowrap値を設定する

white-spaceプロパティには複数の値が用意されており、それぞれ改行と空白の扱いが異なります。前章で解説したnowrapは自動改行を止める代表的な値ですが、preやnormalと比較することで特徴が把握しやすくなります。

nowrap値は、通常の空白や改行を折りたたみながら自動改行だけを止める指定です。一方で次に紹介するpre値は、ソース上の改行や空白をそのまま維持する点が異なる特徴です。

pre値を利用してソースコードの改行を維持する

HTMLソース内の改行や空白をそのままブラウザ上に反映したい場合は、pre値を選択します。通常、Webブラウザは連続する半角スペースを1つにまとめますが、pre値はこの挙動を抑制する仕組みです。

.code-block {
  white-space: pre;
}

ソースコードの表示や特定のレイアウトを厳密に保つ必要がある際に、pre値の指定が有効に働きます。主な値ごとの挙動の違いをまとめた表は、以下の通りです。

値ごとの挙動を理解しておくと、レイアウトの崩れを防ぎたい場面と、ソースコードの整形をそのまま見せたい場面を適切に切り分けられます。

1行に収まりきらない長いテキストを、末尾で省略して「…」を表示する手法を解説します。この表現は、限られたカード型のレイアウトやナビゲーションメニューの表示を整える際に有効な手段です。

三点リーダの表示に必要な3つのプロパティと役割をまとめた表は、以下の通りです。

この3つを組み合わせて初めて三点リーダが正しく表示されるため、次のH3ではそれぞれの役割を順に確認します。

overflowプロパティで領域外を隠す

三点リーダを表示する前段階として、親要素の幅を超えて溢れたコンテンツを非表示にする設定を適用します。overflowプロパティにhiddenを指定することで、ボックスを突き抜けて表示されるテキストを制御する仕組みです。

.example {
  white-space: nowrap;
  overflow: hidden;
}

white-spaceにより、折り返しを止めただけでは、文字が枠外へ突き抜けて表示を阻害してしまいます。

overflowの設定を組み合わせ、視覚的に見た目をカットする処理を行うことによって、テキストがボックス外へはみ出して表示が崩れるのを防ぐ効果が得られる仕組みです。

text-overflowで「…」を表示する

最後に、切り捨てられた箇所を明示するための装飾を加えます。text-overflowにellipsisを設定すると、あふれた部分の表示だけが三点リーダに置き換わる仕組みであり、要素が保持する元のテキスト内容そのものが変更されるわけではありません。

.example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ただし、この指定が効果を持つのは、overflowプロパティがvisible以外(hiddenやclipなど)に設定され、対象の要素が有限の幅を持っている場合に限られます。プロパティを単独で記述しても、省略記号は表示されません。

1行のテキストを対象にする場合はwhite-space: nowrapも組み合わせ、overflow・text-overflowとあわせて3つの指定をセットで記述するパターンが一般的です。

省略表示は視覚的な情報を隠す処理のため、詳細を確認できる手段もあわせて検討することが推奨されます。対象要素にtitle属性で全文を付与したり、画面幅が十分に取れるレスポンシブ環境では折り返しを許可したりする工夫が有効です。

特定のタグだけ折り返しを禁止できますか？

特定のHTML要素だけに適用したい場合は、対象を<span>タグなどで囲み、そのクラスにwhite-space: nowrap;を指定する方法が有効です。

クラス名でスタイルを定義すれば、ページ内の他のテキストへ影響を与えずに、特定の単語やフレーズだけを一行で表示できます。

スマホ表示の時だけ折り返しを許可する方法を教えてください

レスポンシブデザインでは、メディアクエリを使って画面幅ごとにスタイルを切り替えます。PCではwhite-space: nowrap;で一行に収め、スマホ用のブレイクポイント内でwhite-space: normal;を上書きするのが一般的です。

基本のスタイルをどちらのデバイスに合わせるかによって、メディアクエリの条件を調整すると、両方の画面幅で見やすい表示を維持できます。

ITやプログラミングに関するコラム

• 
  【Python】FastAPIで料金プラン見積もりシミュレーターを作ってみた
• 
  【Python】pandasとmatplotlibで在庫データのABC分析と構成比を可視化してみた
• 
  【Python】Flaskで社内FAQをカテゴリ検索できるWebアプリを作ってみた
• 
  【Python】argparseでJSON整形・構文検証・キー検索CLIを試してみた
• 
  【Python】NumPyとmatplotlibでモンテカルロ法による円周率推定と収束過程の可視化を試してみた
• 
  【Python】Playwrightでスクレイピングを試してみた
• 
  【CSS】notで複数の件を除外する方法
• 
  【Git】remote設定を変更する方法
• 
  【VBA】コメントアウトを設定する方法
• 
  x86とx64の違いを分かりやすく解説

ITやプログラミングに関するニュース

• 
  VercelがAI GatewayにSeedream 5.0 Proを追加、AI SDKのモデル指定で画像生成と編集が可能に
• 
  AWSがAmazon LocationのPlaces APIを強化、住所表記の指定と移動手段別の検索が可能に
• 
  VercelがトレースにTree・Waterfallビューを追加、ログ画面で処理の階層と所要時間を確認可能に
• 
  Googleがエージェント評価の再考を提唱、難易度を情報量で測るDiscovery Benchを解説
• 
  Google CloudがCloud Runサンドボックスを公開プレビューで提供、サービスヘルスは一般提供に
• 
  Google Cloud EMEAが英国金融の重要第三者に指定、イングランド銀行・PRA・FCAの直接監督下に
• 
  AWS DMS Schema ConversionがSQL Serverのオフライン変換に対応、ソースDBへ接続せずスキーマを変換可能に
• 
  EC2 G7インスタンスが米国東部（バージニア北部）で利用可能に、G6比でAI推論性能が最大4.6倍
• 
  SageMaker HyperPodが継続プロビジョニングでのAMIベース構成に対応、S3のスクリプト管理なしでSlurmクラスターを作成可能に
• 
  AWSがEMR on EKSでSparkトラブルシューティングエージェントに対応、失敗ジョブの原因分析を自然言語で依頼可能に