CSSで折り返しを完全に禁止する方法｜nowrapだけじゃ足りない実践テクと崩れ対策も解説

テキストや要素が意図しない場所で折り返されてしまい、デザインが崩れてしまった――そんな経験はありませんか？

たとえば、商品コードやURL、グローバルナビのメニュー名が中途半端に改行されてレイアウトが崩れてしまう。スマホでは1行に収まっていたのに、PCで見ると途切れている。こうした“ちょっとした違和感”が積み重なると、ユーザー体験にも悪影響を与えてしまいます。

そんなとき役立つのが、CSSで「折り返しを禁止する」ためのプロパティやテクニックです。特によく使われるのが white-space: nowrap; ですが、これだけでは思ったように動作しないこともあります。overflowやtext-overflow、word-breakなど他のプロパティとの組み合わせ、FlexboxやGridレイアウトとの兼ね合い、さらにはレスポンシブ対応など、実は考慮すべき点がたくさんあるのです。

この記事では、CSSによる折り返し禁止の方法を基礎から応用まで、具体的なコード例を交えながら丁寧に解説します。「なぜ折り返されるのか？」という根本的な仕組みを理解することで、どんなケースにも柔軟に対応できるようになります。デザイン崩れを防ぎ、よりスマートなUIを実現したい方はぜひ最後までご覧ください。

CSSでテキストの折り返しを禁止する基本とプロパティの使い方

Webサイトのレイアウトを制作する際、テキストが意図しない位置で改行されてしまい、デザインが崩れた経験はありませんか？商品名やナビゲーションメニュー、URL、追跡コードなど、特定のテキストを1行で表示したい場面は頻繁に発生します。CSSのwhite-spaceプロパティを適切に使いこなすことで、こうした問題を効率的に解決し、美しく整ったレイアウトを実現できます。

このセクションでは、テキストの折り返しを制御するCSSプロパティの基本概念から、実際の使用場面まで詳しく解説していきます。

white-space: nowrap; の基本と使い方：なぜ改行が起こる？

テキストの自動改行が起こる仕組み

通常、HTML内のテキストはブロック要素やインライン要素の幅に応じて自動的に改行されます。これは、ブラウザがテキストを読みやすく表示するための標準的な挙動です。具体的には以下のような要因で改行が発生します：

• 親要素の幅制限：コンテナの幅に収まらない場合
• 文字種による改行ルール：日本語、英語、記号などの文字種による改行位置の違い
• CSS box model：padding、border、marginによる実効幅の制限

white-space: nowrap;による改行制御

white-space: nowrap;は、要素内のテキストの改行を強制的に禁止するCSSプロパティです。このプロパティを適用すると、テキストは親要素の幅を超えても1行で表示され続けます。

<!-- 基本的な使用例 -->
<div class="container">
  <p class="no-wrap">この長いテキストは絶対に改行されず、一行で表示されます。コンテナの幅を超えてもそのまま続きます。</p>
</div>

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

.no-wrap {
  white-space: nowrap;
  background-color: #f0f8ff;
}

具体的なユースケースとその実装

1. 商品名の1行表示

ECサイトの商品一覧で、商品名が途中で切れると見栄えが悪くなります：

<div class="product-card">
  <h3 class="product-name">プレミアム オーガニック コーヒー豆 エチオピア産 フェアトレード認証 200g</h3>
  <p class="price">¥2,980</p>
</div>

.product-card {
  width: 250px;
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
}

.product-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  margin: 0 0 10px 0;
}

.price {
  font-weight: bold;
  color: #e74c3c;
}

2. ナビゲーションメニューの項目

グローバルナビゲーションでメニュー項目が改行されるのを防ぎます：

<nav class="global-nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="#" class="nav-link">ホーム</a></li>
    <li class="nav-item"><a href="#" class="nav-link">サービス紹介</a></li>
    <li class="nav-item"><a href="#" class="nav-link">会社概要・アクセス</a></li>
    <li class="nav-item"><a href="#" class="nav-link">お問い合わせ</a></li>
  </ul>
</nav>

.global-nav {
  background-color: #2c3e50;
  padding: 0 20px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: 30px;
}

.nav-link {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  white-space: nowrap; /* メニュー項目の改行を防止 */
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: #34495e;
}

3. 日付・時間の表示

日付や時間が改行されると読みにくくなるため、1行で表示します：

<div class="event-info">
  <span class="event-date">2024年12月25日（水）14:30〜16:00</span>
  <span class="event-location">東京国際フォーラム ホールA</span>
</div>

.event-info {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
}

.event-date,
.event-location {
  display: block;
  white-space: nowrap;
  margin-bottom: 5px;
  font-size: 14px;
}

.event-date {
  color: #e74c3c;
  font-weight: bold;
}

他のwhite-spaceプロパティ（normal、pre、pre-wrap）との違い

white-spaceプロパティにはnowrap以外にも複数の値があり、それぞれ異なる改行・空白処理の挙動を持ちます。適切な値を選択することで、より精密なテキスト制御が可能になります。

white-spaceプロパティの値と挙動比較

プロパティ値	改行処理	連続する空白	HTML内の改行	使用場面
normal	自動改行あり	1つにまとめる	無視	通常のテキスト（デフォルト）
nowrap	改行なし	1つにまとめる	無視	1行表示強制
pre	改行なし	そのまま表示	そのまま表示	コードブロック、整形済みテキスト
pre-wrap	自動改行あり	そのまま表示	そのまま表示	整形を保持しつつ改行
pre-line	自動改行あり	1つにまとめる	そのまま表示	改行のみ保持

各プロパティの実用的な使用例

normal（デフォルト値）

<p class="normal-text">
  通常のテキストです。    複数の空白は
  1つにまとめられ、自動的に改行されます。
</p>

.normal-text {
  white-space: normal;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

pre（整形済みテキスト）

<div class="code-block">
function calculateTotal() {
    let total = 0;
    for (let i = 0; i < items.length; i++) {
        total += items[i].price;
    }
    return total;
}
</div>

.code-block {
  white-space: pre;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 15px;
  font-family: 'Courier New', monospace;
  overflow: auto;
}

pre-wrap（整形保持＋自動改行）

<div class="formatted-text">
詩や歌詞など、
    インデントや改行が
        重要な意味を持つテキストに
最適です。
</div>

.formatted-text {
  white-space: pre-wrap;
  width: 250px;
  border: 1px solid #ddd;
  padding: 15px;
  background-color: #f9f9f9;
}

pre-line（改行のみ保持）

<div class="address-block">
株式会社サンプル
東京都渋谷区○○1-2-3
TEL: 03-1234-5678
</div>

.address-block {
  white-space: pre-line;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  line-height: 1.5;
}

使い分けのポイント

• nowrap: メニュー、タグ、ボタンなど、絶対に改行したくない要素
• pre: ソースコード、アスキーアートなど、完全な整形保持が必要
• pre-wrap: 詩、歌詞、住所など、改行は保持したいが長い行は折り返したい
• pre-line: 改行は意味があるが、余分な空白は不要な場合

URL・メールアドレス・商品コードを強制1行表示するCSSテクニック

Web制作において、URL、メールアドレス、商品コード、追跡番号などの特定の文字列は、途中で改行されると正確性が損なわれたり、コピー&ペーストがしにくくなったりします。これらの文字列に対する適切な改行禁止の実装方法を解説します。

URL表示の改行禁止

<div class="url-container">
  <h4>参考リンク</h4>
  <p class="url-text">
    詳細は以下のURLをご参照ください：<br>
    <span class="url"><https://example.com/very-long-path/to/specific/page?param1=value1&param2=value2></span>
  </p>
</div>

.url-container {
  width: 400px;
  border: 1px solid #ddd;
  padding: 15px;
  background-color: #f8f9fa;
}

.url {
  white-space: nowrap;
  color: #007bff;
  text-decoration: underline;
  font-family: 'Courier New', monospace;
  background-color: #e9ecef;
  padding: 2px 4px;
  border-radius: 3px;

  /* はみ出し対策（次セクションで詳しく解説） */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

メールアドレスの1行表示

<div class="contact-info">
  <h4>お問い合わせ</h4>
  <dl class="contact-list">
    <dt>一般的なお問い合わせ</dt>
    <dd class="email">info@example-company-name.co.jp</dd>
    <dt>技術サポート</dt>
    <dd class="email">technical-support@example-company-name.co.jp</dd>
  </dl>
</div>

.contact-info {
  width: 350px;
  border: 1px solid #ddd;
  padding: 20px;
}

.contact-list {
  margin: 0;
}

.contact-list dt {
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 5px;
}

.contact-list dd {
  margin: 0 0 10px 20px;
}

.email {
  white-space: nowrap;
  color: #007bff;
  font-family: 'Courier New', monospace;
  background-color: #f8f9fa;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

商品コード・追跡番号の表示

<div class="order-details">
  <h4>注文詳細</h4>
  <table class="order-table">
    <tr>
      <td class="label">注文番号</td>
      <td class="code">ORD-2024-001-ABCDEFG-XYZ</td>
    </tr>
    <tr>
      <td class="label">商品コード</td>
      <td class="code">SKU-PRD-12345-SIZE-L-COLOR-RED</td>
    </tr>
    <tr>
      <td class="label">追跡番号</td>
      <td class="code">JP-TRACK-987654321-EXPRESS-DELIVERY</td>
    </tr>
  </table>
</div>

.order-details {
  width: 500px;
  border: 1px solid #ddd;
  padding: 20px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
}

.order-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

.label {
  width: 120px;
  font-weight: bold;
  background-color: #f8f9fa;
}

.code {
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  background-color: #fff3cd;
  font-size: 13px;
  letter-spacing: 0.5px;

  /* コピーしやすくするための配慮 */
  user-select: all;
  cursor: pointer;
  border-radius: 3px;
  padding: 5px;
}

.code:hover {
  background-color: #ffeaa7;
}

複合的な実装例：商品情報カード

<div class="product-info-card">
  <h3 class="product-title">プレミアム Bluetooth ワイヤレスイヤホン</h3>
  <div class="product-meta">
    <div class="meta-row">
      <span class="meta-label">SKU:</span>
      <span class="meta-value code">BT-EARPHONE-PRO-2024-BLACK</span>
    </div>
    <div class="meta-row">
      <span class="meta-label">製品URL:</span>
      <span class="meta-value url"><https://shop.example.com/products/bt-earphone-pro-2024></span>
    </div>
    <div class="meta-row">
      <span class="meta-label">サポート:</span>
      <span class="meta-value email">product-support@example.com</span>
    </div>
  </div>
</div>

.product-info-card {
  max-width: 450px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-title {
  margin: 0 0 15px 0;
  color: #333;
}

.meta-row {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
}

.meta-label {
  width: 80px;
  font-weight: bold;
  color: #666;
  flex-shrink: 0;
}

.meta-value {
  flex: 1;
  min-width: 0; /* flexアイテムのはみ出し対策 */
}

.meta-value.code,
.meta-value.url,
.meta-value.email {
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background-color: #f8f9fa;
  padding: 2px 4px;
  border-radius: 3px;

  /* はみ出し時の対策 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-value.url {
  color: #007bff;
}

.meta-value.email {
  color: #28a745;
}

はみ出し問題への考慮

white-space: nowrap;を適用すると、テキストが親要素からはみ出す可能性があります。この問題は次のセクション「折り返し禁止時のレイアウト崩れ・はみ出し対策と実践テクニック」で詳しく解説しますが、基本的な対策として以下の組み合わせを覚えておいてください：

.nowrap-safe {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

この基本パターンを理解することで、様々な場面でテキストの折り返しを適切に制御し、美しく機能的なWebレイアウトを実現できます。

折り返し禁止時のレイアウト崩れ・はみ出し対策と実践テクニック

white-space: nowrap;を適用すると、テキストは確実に1行で表示されますが、同時に新たな問題が発生することがあります。最も多いのが「テキストがコンテナからはみ出してレイアウトが崩れる」という問題です。このセクションでは、そうした問題を解決し、美しく実用的なレイアウトを実現するための実践的なテクニックを詳しく解説します。

text-overflow: ellipsis;やoverflowプロパティによる省略・スクロール・隠す方法

省略記号（…）で美しく収める：text-overflow: ellipsis

white-space: nowrap;を適用した際の最も基本的かつ効果的な対策がtext-overflow: ellipsis;です。これにより、コンテナに収まらない部分を省略記号（「…」）で表示できます。

<div class="ellipsis-container">
  <p class="ellipsis-text">これは非常に長いテキストで、コンテナの幅を超える可能性があります</p>
</div>

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

.ellipsis-text {
  /* 省略表示に必要な3つのプロパティセット */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 見やすさのためのスタイル */
  margin: 0;
  background-color: #f9f9f9;
  padding: 5px;
}

重要ポイント：text-overflow: ellipsis;を機能させるには、以下の3つのプロパティがすべて必要です：

1. white-space: nowrap; – 改行を禁止
2. overflow: hidden; – はみ出した部分を隠す
3. text-overflow: ellipsis; – 省略記号を表示

overflowプロパティによる多様な表示制御

はみ出したコンテンツの処理方法は、overflowプロパティで細かく制御できます：

<div class="overflow-examples">
  <div class="overflow-hidden">
    <h4>overflow: hidden（隠す）</h4>
    <p>長いテキストがここに表示されますが、はみ出した部分は完全に隠されます</p>
  </div>

  <div class="overflow-scroll">
    <h4>overflow: scroll（スクロールバー常時表示）</h4>
    <p>長いテキストがここに表示され、はみ出した場合はスクロールバーが表示されます</p>
  </div>

  <div class="overflow-auto">
    <h4>overflow: auto（必要時のみスクロールバー）</h4>
    <p>長いテキストがここに表示され、必要な場合のみスクロールバーが表示されます</p>
  </div>
</div>

.overflow-examples > div {
  width: 250px;
  height: 60px;
  margin: 10px 0;
  border: 1px solid #ddd;
  padding: 10px;
}

.overflow-examples p {
  white-space: nowrap;
  margin: 0;
}

.overflow-hidden p {
  overflow: hidden;
}

.overflow-scroll p {
  overflow: scroll;
}

.overflow-auto p {
  overflow: auto;
}

各手法のメリット・デメリットと使い分け

手法	メリット	デメリット	適用場面
ellipsis	省略されたことが視覚的に分かりやすい	全文が読めない	カード型UI、ナビゲーション
hidden	すっきりとした見た目	コンテンツの存在に気づけない	デザイン重視の場面
scroll	全てのコンテンツにアクセス可能	常にスクロールバーが表示される	データ表示、ログ表示
auto	必要時のみスクロールバー表示	ブラウザによって挙動が異なる場合がある	汎用的な用途

実践的な応用例：商品カードでの活用

<div class="product-card">
  <img src="product.jpg" alt="商品画像" class="product-image">
  <div class="product-info">
    <h3 class="product-title">超高性能ワイヤレスイヤホン Pro Max Ultra Special Edition</h3>
    <p class="product-price">¥29,800</p>
    <p class="product-description">最新技術を搭載した革新的なワイヤレスイヤホンで、クリアな音質と長時間バッテリーを実現</p>
  </div>
</div>

.product-card {
  width: 300px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 0;

  /* タイトルの改行防止と省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-description {
  font-size: 14px;
  color: #666;
  margin: 10px 0 0 0;

  /* 説明文も省略表示 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Flexbox・Grid・float での折り返し防止と注意点

Flexboxでの折り返し防止テクニック

Flexboxコンテナでは、アイテムの折り返しとテキストの折り返しの両方を考慮する必要があります：

<div class="flex-container">
  <div class="flex-item">短いテキスト</div>
  <div class="flex-item">これは非常に長いテキストでFlexアイテムからはみ出す可能性があります</div>
  <div class="flex-item">中程度のテキスト</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: nowrap; /* Flexアイテムの折り返しを禁止 */
  gap: 10px;
  padding: 20px;
  border: 1px solid #ccc;
}

.flex-item {
  flex: 1; /* 均等に幅を分配 */
  min-width: 0; /* 重要：Flexアイテムの最小幅を0に設定 */
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;

  /* テキストの折り返し防止と省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

重要な注意点：Flexアイテムにmin-width: 0;を設定することで、アイテムが親コンテナの幅を超えて伸びるのを防げます。

より高度なFlexboxレイアウトの制御

<nav class="flex-nav">
  <div class="nav-logo">
    <img src="logo.svg" alt="ロゴ">
  </div>
  <ul class="nav-menu">
    <li><a href="#" class="nav-link">ホーム</a></li>
    <li><a href="#" class="nav-link">私たちについて</a></li>
    <li><a href="#" class="nav-link">サービス・製品情報</a></li>
    <li><a href="#" class="nav-link">お問い合わせ</a></li>
  </ul>
  <div class="nav-actions">
    <button class="btn">ログイン</button>
  </div>
</nav>

.flex-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.nav-logo img {
  height: 40px;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1; /* 中央部分を伸縮可能に */
  justify-content: center;
  max-width: 600px; /* 最大幅を制限 */
}

.nav-menu li {
  flex: 0 1 auto; /* 縮小可能だが拡大しない */
  min-width: 0;
}

.nav-link {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;

  /* 長いメニュー名の対応 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった

Webデザインで「要素を横並びにしたいのに、勝手に折り返される…」そんな経験はありませんか？flex-wrap: nowrap;を指定しているのに思ったように動作しない原因は、親要素のサイズ、CSSリセット、ブラウザの互換性など、さまざまな要因が考えられます。この記事では、Flexboxで要素を折り返さないための具体的...

watashi.xyz

2022.06.08

CSS Gridでの折り返し防止

CSS Gridでは、グリッドアイテム内のテキストの折り返しを制御する方法が重要です：

<div class="grid-container">
  <div class="grid-item header">ヘッダー部分</div>
  <div class="grid-item sidebar">サイドバー</div>
  <div class="grid-item content">
    <h2>メインコンテンツエリアの非常に長いタイトルです</h2>
    <p>ここにメインコンテンツが表示されます。</p>
  </div>
  <div class="grid-item footer">フッター部分</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 10px;
  height: 500px;
  padding: 10px;
}

.grid-item {
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

/* グリッドアイテム内の長いテキスト対応 */
.content h2 {
  margin: 0 0 15px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* サイドバーの長いメニュー項目対応 */
.sidebar {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法

はじめにレスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。どちらを使うかは条件によって分かれます。例えば…＜条件1＞スマホは1列、デスクトップは4列、要素は左詰めでOK＜条件2＞スマホ...

watashi.xyz

2024.02.25

floatレイアウトでの折り返し防止（レガシー対応）

現在ではFlexboxやGridが主流ですが、既存のfloatレイアウトでの対応方法も重要です：

<div class="float-container">
  <div class="float-left">左側のコンテンツ（サイドバー等）</div>
  <div class="float-right">右側のコンテンツ</div>
  <div class="float-main">
    <h2>メインコンテンツの非常に長いタイトルがここに表示されます</h2>
    <p>メインコンテンツの本文です。</p>
  </div>
</div>

.float-container {
  width: 100%;
  overflow: hidden; /* clearfixの代替 */
  padding: 10px;
}

.float-left {
  float: left;
  width: 200px;
  background-color: #e8f4f8;
  padding: 15px;
  margin-right: 10px;

  /* 左側コンテンツの折り返し防止 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.float-right {
  float: right;
  width: 150px;
  background-color: #f8e8e8;
  padding: 15px;
  margin-left: 10px;

  /* 右側コンテンツの折り返し防止 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.float-main {
  overflow: hidden; /* 新しいブロック整形コンテキストを作成 */
  background-color: #f8f8f8;
  padding: 15px;
}

.float-main h2 {
  margin: 0 0 15px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

モバイル表示・レスポンシブ対応時の改行防止テクニック

メディアクエリと組み合わせた適応的な改行制御

モバイルデバイスでは画面幅が限られるため、デスクトップでは有効なwhite-space: nowrap;が逆効果になることがあります。レスポンシブ対応では、画面サイズに応じて動的に改行制御を変更する必要があります：

<div class="responsive-container">
  <h2 class="responsive-title">レスポンシブ対応の非常に長いタイトルです</h2>
  <nav class="responsive-nav">
    <ul class="nav-list">
      <li><a href="#">ホーム</a></li>
      <li><a href="#">私たちについて</a></li>
      <li><a href="#">サービス・製品</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

.responsive-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.responsive-title {
  font-size: 24px;
  margin: 0 0 20px 0;

  /* デスクトップでは改行禁止 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

.nav-list a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  border-radius: 4px;

  /* ナビゲーション項目の改行禁止 */
  white-space: nowrap;
}

/* タブレット向け調整 */
@media (max-width: 768px) {
  .responsive-title {
    font-size: 20px;
    /* タブレットサイズでは改行を許可 */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .nav-list {
    gap: 10px;
  }

  .nav-list a {
    padding: 8px 12px;
    font-size: 14px;
  }
}

/* スマートフォン向け調整 */
@media (max-width: 480px) {
  .responsive-container {
    padding: 15px;
  }

  .responsive-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .nav-list {
    flex-direction: column;
    gap: 5px;
  }

  .nav-list a {
    /* モバイルでは改行を許可して読みやすく */
    white-space: normal;
    text-align: center;
  }
}

ビューポート単位を活用した動的サイズ調整

<div class="viewport-container">
  <h1 class="viewport-title">ビューポートに対応したタイトル</h1>
  <div class="viewport-content">
    <p class="dynamic-text">画面サイズに応じて動的にサイズが変わるテキストです</p>
  </div>
</div>

.viewport-container {
  width: 100%;
  padding: 2vw; /* ビューポート幅の2% */
}

.viewport-title {
  font-size: clamp(18px, 4vw, 36px); /* 最小18px、最大36px */
  margin: 0 0 20px 0;

  /* 大画面では改行禁止、小画面では許可 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dynamic-text {
  font-size: clamp(14px, 2.5vw, 18px);
  line-height: 1.5;
}

/* より細かい制御 */
@media (max-width: 600px) {
  .viewport-title {
    white-space: normal; /* 小画面では改行を許可 */
    overflow: visible;
    text-overflow: unset;
  }
}

/* 非常に小さな画面向け */
@media (max-width: 320px) {
  .viewport-container {
    padding: 10px;
  }

  .viewport-title {
    font-size: 16px; /* 固定サイズで可読性を確保 */
  }
}

モバイルファーストなレスポンシブ改行制御

/* モバイルファーストアプローチ */
.mobile-first-element {
  /* 基本（モバイル）: 改行を許可 */
  white-space: normal;
  font-size: 16px;
  line-height: 1.4;
  padding: 15px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .mobile-first-element {
    font-size: 18px;
    padding: 20px;
    /* 中画面では条件付きで改行禁止 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .mobile-first-element {
    font-size: 20px;
    padding: 25px;
    /* 大画面では確実に改行禁止 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

UX配慮のベストプラクティス

<div class="ux-optimized">
  <div class="card-container">
    <div class="card">
      <h3 class="card-title">ユーザビリティを考慮したカードタイトル</h3>
      <p class="card-meta">2024年1月15日 | カテゴリ名</p>
      <p class="card-description">カードの説明文がここに表示されます。長い場合は適切に処理されます。</p>
      <button class="card-action" title="詳細を表示">詳細を見る</button>
    </div>
  </div>
</div>

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;

  /* デスクトップでの省略表示 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* ホバー時にツールチップで全文表示 */
  cursor: help;
}

.card-meta {
  font-size: 12px;
  color: #666;
  margin: 0 0 15px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-description {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px 0;
  color: #444;

  /* 説明文は2行で制限 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* レスポンシブ調整 */
@media (max-width: 480px) {
  .card-title {
    white-space: normal; /* モバイルでは改行を許可 */
    overflow: visible;
    text-overflow: unset;
    font-size: 16px;
  }

  .card-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .card-description {
    -webkit-line-clamp: 3; /* モバイルでは3行まで表示 */
  }
}

/* アクセシビリティとUX向上 */
.card:hover .card-title,
.card:focus-within .card-title {
  /* ホバー時の視覚的フィードバック */
  color: #0066cc;
}

/* タッチデバイス向けの調整 */
@media (hover: none) and (pointer: coarse) {
  .card-title {
    cursor: default;
  }
}

これらのテクニックを組み合わせることで、折り返し禁止を適用しながらも、すべてのデバイスで最適なユーザー体験を提供できます。重要なのは、デザインの美しさとユーザビリティのバランスを取ることです。

特定ケースへの対応とトラブルシューティング

実際のWeb開発では、単純にwhite-space: nowrap;を指定するだけでは解決できない複雑なケースに遭遇することがよくあります。テーブルのレイアウト、特殊な文字列の扱い、そしてCSSフレームワークとの併用など、具体的な場面で発生する問題とその解決策を詳しく見ていきましょう。

テーブルのヘッダーやグローバルナビ内の改行防止方法

テーブルヘッダーでの改行防止

テーブルのヘッダー（<th>）内で長い項目名が改行されると、全体のレイアウトが崩れがちです。特に、データテーブルでは列の幅を統一し、見やすさを保つことが重要になります。

<table class="data-table">
  <thead>
    <tr>
      <th class="nowrap-header">商品コード</th>
      <th class="nowrap-header">商品名（詳細情報含む）</th>
      <th class="nowrap-header">在庫数量</th>
      <th class="nowrap-header">最終更新日時</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ABC123</td>
      <td>高品質プレミアム商品 特別仕様版</td>
      <td>150個</td>
      <td>2024-07-22 14:30</td>
    </tr>
  </tbody>
</table>

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 重要：列幅を固定 */
}

.nowrap-header {
  white-space: nowrap;
  padding: 12px 8px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  font-weight: bold;
  text-align: center;

  /* はみ出し対策 */
  overflow: hidden;
  text-overflow: ellipsis;

  /* 最小幅を確保 */
  min-width: 120px;
}

.data-table td {
  padding: 8px;
  border: 1px solid #ddd;
  /* データ部分は改行を許可 */
  white-space: normal;
}

重要なポイント：

• table-layout: fixed;により列幅を制御しやすくする
• ヘッダーにはtext-overflow: ellipsis;とoverflow: hidden;を併用
• データ部分（<td>）はwhite-space: normal;で改行を許可

グローバルナビゲーションでの改行防止

ナビゲーションメニューでは、項目名が改行されると見た目が不統一になり、ユーザビリティが損なわれます。

<nav class="global-nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="/">ホーム</a></li>
    <li class="nav-item"><a href="/products">商品・サービス一覧</a></li>
    <li class="nav-item"><a href="/company">会社概要・沿革</a></li>
    <li class="nav-item"><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

.global-nav {
  background-color: #333;
  padding: 0;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

.nav-item {
  flex: 1;
  text-align: center;
}

.nav-item a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  white-space: nowrap; /* 改行を防止 */

  /* はみ出し対策 */
  overflow: hidden;
  text-overflow: ellipsis;

  transition: background-color 0.3s ease;
}

.nav-item a:hover {
  background-color: #555;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .nav-list {
    flex-direction: column;
  }

  .nav-item a {
    white-space: normal; /* モバイルでは改行を許可 */
    text-align: center;
  }
}

英数字・URL・追跡コードが途中で切れないようにするプロパティ（word-break / overflow-wrap）

word-breakプロパティの活用

white-space: nowrap;だけでは対応できない、単語内での改行制御にはword-breakプロパティが効果的です。

<div class="url-container">
  <p class="url-display">
    アクセス先URL: <https://example.com/very-long-path/product-details/special-campaign-2024>
  </p>
  <p class="tracking-code">
    追跡コード: ABC123DEF456GHI789JKL012MNO345PQR678STU901VWX234YZA567
  </p>
</div>

.url-container {
  max-width: 400px;
  border: 1px solid #ddd;
  padding: 16px;
  margin: 20px 0;
}

.url-display {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  font-family: monospace;

  /* URL全体を1行で表示 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tracking-code {
  background-color: #fff3cd;
  padding: 10px;
  border-radius: 4px;
  border-left: 4px solid #ffc107;
  font-family: monospace;

  /* 長いコードの途中改行を防止 */
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

overflow-wrap（旧word-wrap）プロパティとの使い分け

/* 各プロパティの挙動比較 */
.word-break-normal {
  word-break: normal; /* 標準的な改行ルール */
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

.word-break-break-all {
  word-break: break-all; /* 任意の文字間で改行 */
  border: 1px solid #28a745;
  padding: 10px;
  margin: 10px 0;
}

.word-break-keep-all {
  word-break: keep-all; /* 単語を分割しない */
  border: 1px solid #dc3545;
  padding: 10px;
  margin: 10px 0;
}

.overflow-wrap-anywhere {
  overflow-wrap: anywhere; /* 必要に応じて任意の箇所で改行 */
  border: 1px solid #6f42c1;
  padding: 10px;
  margin: 10px 0;
}

/* 実用的な組み合わせ例 */
.code-display {
  font-family: 'Courier New', monospace;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 12px;
  border-radius: 4px;

  /* コード全体を1行で表示、はみ出しは省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

具体的な使い分けガイドライン

/* URLやメールアドレス：1行表示が望ましい */
.url-field, .email-field {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

/* 商品コード・追跡コード：分割不可 */
.product-code, .tracking-id {
  white-space: nowrap;
  word-break: keep-all;
  font-family: monospace;
  letter-spacing: 0.5px;
}

/* 長い英語テキスト：適切な箇所で改行 */
.english-text {
  word-break: break-word; /* 古いブラウザ対応 */
  overflow-wrap: break-word; /* 現代的な指定 */
}

/* 日本語テキスト：単語境界を尊重 */
.japanese-text {
  word-break: keep-all;
  overflow-wrap: break-word;
}

Bootstrap・Tailwind CSSでの折り返し禁止とクラス活用方法

Bootstrapでの実装

Bootstrap 5では、テキスト関連のユーティリティクラスが充実しています。

<!-- Bootstrap 5 での折り返し禁止 -->
<div class="container mt-4">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title text-nowrap text-truncate">
            非常に長いカードのタイトルがここに入ります
          </h5>
        </div>
        <div class="card-body">
          <p class="card-text text-nowrap text-truncate">
            このテキストは改行されずに省略記号で表示されます。
          </p>
          <div class="d-flex flex-nowrap gap-2">
            <span class="badge bg-primary text-nowrap">タグ1</span>
            <span class="badge bg-secondary text-nowrap">長いタグ名</span>
            <span class="badge bg-success text-nowrap">カテゴリA</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- テーブルでの活用 -->
  <table class="table table-striped mt-4">
    <thead>
      <tr>
        <th class="text-nowrap">商品コード</th>
        <th class="text-nowrap">商品名（詳細）</th>
        <th class="text-nowrap">価格（税込）</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-nowrap font-monospace">ABC-123-XYZ</td>
        <td class="text-truncate" style="max-width: 200px;">
          プレミアム高品質商品 特別限定版
        </td>
        <td class="text-nowrap">¥1,980</td>
      </tr>
    </tbody>
  </table>
</div>

/* Bootstrap カスタマイズ例 */
.custom-nowrap {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Bootstrap の .text-truncate を拡張 */
.text-truncate-sm {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-truncate-lg {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to lif...

getbootstrap.com

Tailwind CSSでの実装

Tailwind CSSは、より細かい制御が可能なユーティリティクラスを提供しています。

<!-- Tailwind CSS での折り返し禁止 -->
<div class="max-w-4xl mx-auto p-6">
  <div class="bg-white shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold whitespace-nowrap truncate mb-4">
      非常に長いタイトルがここに配置されます
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-gray-50 p-4 rounded">
        <h3 class="font-semibold whitespace-nowrap truncate">商品情報</h3>
        <p class="text-sm text-gray-600 whitespace-nowrap truncate mt-2">
          商品コード: PROD-2024-SPECIAL-EDITION-123
        </p>
      </div>

      <div class="bg-gray-50 p-4 rounded">
        <h3 class="font-semibold whitespace-nowrap">URL情報</h3>
        <p class="text-sm text-blue-600 font-mono whitespace-nowrap truncate mt-2">
          <https://example.com/very-long-path>
        </p>
      </div>

      <div class="bg-gray-50 p-4 rounded">
        <h3 class="font-semibold whitespace-nowrap">ステータス</h3>
        <div class="flex flex-nowrap gap-2 mt-2">
          <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs whitespace-nowrap">
            アクティブ
          </span>
          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs whitespace-nowrap">
            検証済み
          </span>
        </div>
      </div>
    </div>

    <!-- 応答性のある改行制御 -->
    <div class="mt-6 p-4 bg-yellow-50 rounded">
      <p class="whitespace-nowrap md:whitespace-normal truncate md:break-words">
        モバイルでは省略、デスクトップでは通常表示されるテキスト
      </p>
    </div>
  </div>
</div>

/* Tailwind CSS カスタマイズ例 */
@layer utilities {
  .whitespace-nowrap-important {
    white-space: nowrap !important;
  }

  .truncate-fade {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
  }

  .truncate-fade::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    background: linear-gradient(to right, transparent, white);
  }

  /* 複数行での省略（Tailwind CSS拡張） */
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

フレームワーク併用時の注意点

/* フレームワークのクラスを上書きする場合 */
.custom-override {
  /* 詳細度を上げる方法1：クラスを重複 */
}

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

/* 詳細度を上げる方法2：!important（推奨されない） */
.force-nowrap {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* フレームワーク固有のクラスとの組み合わせ */
/* Bootstrap + カスタムCSS */
.btn.btn-custom-nowrap {
  white-space: nowrap;
  min-width: 120px;
}

/* Tailwind + カスタムCSS */
@layer components {
  .btn-nowrap {
    @apply whitespace-nowrap px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors;
  }
}

これらの手法を適切に使い分けることで、様々な環境でのテキスト折り返し問題を効果的に解決できます。次のセクションでは、実装時によく発生するミスと、それらを避けるためのチェックポイントを詳しく見ていきましょう。

よくあるミスと実装を成功させるためのチェックポイント

CSSの折り返し禁止設定が期待通りに動作しない場合、多くは基本的なミスや見落としが原因です。実装前の確認事項から、ブラウザ間の互換性問題まで、トラブルを未然に防ぐためのポイントを体系的に解説します。

折り返し設定が効かないときのよくある原因と優先度の確認

最も頻繁に発生する原因とその解決策

1. CSSセレクタの記述ミス

<div class="product-info">
  <span class="product-code">ABC-123-XYZ-789</span>
  <span class="product-name">プレミアム商品 特別限定版</span>
</div>

/* ❌ よくあるミス：クラス名の誤記 */
.product-cod {  /* 'e' が抜けている */
  white-space: nowrap;
}

/* ❌ よくあるミス：セレクタの階層指定間違い */
.product-info .product-code span {  /* 不要な階層指定 */
  white-space: nowrap;
}

/* ✅ 正しい記述 */
.product-code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. CSS読み込み順序の問題

<!-- ❌ 問題のある読み込み順序 */
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="framework.css"> <!-- 後から読み込まれるため上書きされる -->

<!-- ✅ 正しい読み込み順序 -->
<link rel="stylesheet" href="framework.css">
<link rel="stylesheet" href="custom.css"> <!-- カスタムCSSは最後に -->

3. CSS詳細度（Specificity）の理解不足

/* 詳細度の比較例 */

/* 詳細度: 0,0,1,0 (クラス1個) */
.nowrap-text {
  white-space: nowrap;
}

/* 詳細度: 0,0,2,0 (クラス2個) - より高い優先度 */
.container .nowrap-text {
  white-space: normal; /* こちらが適用される */
}

/* 詳細度: 0,1,0,0 (ID1個) - 最も高い優先度 */
#main-content {
  white-space: pre-wrap; /* こちらが最優先で適用される */
}

/* 解決方法1: より詳細なセレクタを使用 */
.container .product-info .nowrap-text {
  white-space: nowrap;
}

/* 解決方法2: !important を使用（非推奨だが緊急時） */
.nowrap-text {
  white-space: nowrap !important;
}

詳細度の計算方法と実践的なデバッグ手法

/* 詳細度の計算例 */
/* a,b,c,d の形式で表現 */
/* a: インラインスタイル（1000点）*/
/* b: ID（100点）*/
/* c: クラス、属性、疑似クラス（10点）*/
/* d: 要素、疑似要素（1点）*/

/* 0,0,1,1 = 11点 */
p.text {
  white-space: nowrap;
}

/* 0,1,0,1 = 101点 */
#content p {
  white-space: normal; /* こちらが優先される */
}

/* 0,0,2,2 = 22点 */
div.container p.text {
  white-space: nowrap; /* 上記より詳細度が低いため無効 */
}

/* 実践的なデバッグ用CSS */
.debug-nowrap {
  white-space: nowrap !important;
  background-color: yellow !important; /* 適用確認用 */
  border: 2px solid red !important; /* 適用確認用 */
}

開発者ツールでのデバッグ方法：

/* ブラウザの開発者ツールで確認すべき項目 */
/*
1. Elements タブで該当要素を選択
2. Styles パネルで以下を確認：
   - white-space プロパティが取り消し線で消されていないか
   - 他のCSSルールで上書きされていないか
   - Computed タブで最終的に適用されている値を確認
3. Console タブで JavaScript による動的変更がないか確認
*/

/* デバッグ用のJavaScript */
// コンソールで実行してスタイル確認
console.log(getComputedStyle(document.querySelector('.target-element')).whiteSpace);

// 動的にスタイルを適用してテスト
document.querySelector('.target-element').style.whiteSpace = 'nowrap';

JavaScriptによる動的変更との競合

<div id="dynamic-content">
  <span class="text-nowrap">動的に変更されるテキスト</span>
</div>

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

// ❌ 問題のあるJavaScript - CSSを上書きしてしまう
document.addEventListener('DOMContentLoaded', function() {
  const element = document.querySelector('.text-nowrap');
  element.style.whiteSpace = 'normal'; // CSSが無効になる
});

// ✅ 適切な対処法1: クラスの切り替えで制御
.text-wrap {
  white-space: normal;
}

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

// JavaScript側
function toggleWrap(element) {
  element.classList.toggle('text-nowrap');
  element.classList.toggle('text-wrap');
}

// ✅ 適切な対処法2: CSS Custom Properties（カスタムプロパティ）を使用
.flexible-text {
  --white-space: nowrap;
  white-space: var(--white-space);
  overflow: hidden;
  text-overflow: ellipsis;
}

// JavaScript側
element.style.setProperty('--white-space', 'normal');

コンテナサイズやフォントサイズが勝手に変わる問題の対処法

テキストはみ出しによるレイアウト崩れの対策

<div class="card-container">
  <div class="card">
    <h3 class="card-title">非常に長いタイトルがここに配置されています</h3>
    <p class="card-description">
      これは商品の詳細説明文です。長いテキストが入る場合があります。
    </p>
    <div class="card-footer">
      <span class="price">¥1,980</span>
      <button class="btn">購入</button>
    </div>
  </div>
</div>

/* ❌ 問題のあるCSS - コンテナが広がってしまう */
.card {
  width: 300px;
  border: 1px solid #ddd;
  padding: 16px;
}

.card-title {
  white-space: nowrap; /* これだけだと親要素が広がる */
  font-size: 18px;
  margin-bottom: 12px;
}

/* ✅ 正しい対処法 */
.card {
  width: 300px;
  border: 1px solid #ddd;
  padding: 16px;
  box-sizing: border-box; /* 重要：padding込みでサイズ計算 */
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  margin-bottom: 12px;

  /* 最大幅を明示的に指定 */
  max-width: 100%;

  /* フォントサイズの自動縮小を防止 */
  font-size-adjust: none;
}

/* さらに安全な対策 */
.card-title-container {
  width: 100%;
  min-width: 0; /* Flexbox内での縮小を許可 */
}

.card-title-safe {
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

Flexbox・Grid レイアウトでの特殊な対処法

<div class="flex-container">
  <div class="flex-item">
    <span class="long-text">非常に長いテキストがここに配置されています</span>
  </div>
  <div class="flex-item">
    <button class="action-btn">アクション</button>
  </div>
</div>

/* ❌ 問題のある Flexbox 実装 */
.flex-container {
  display: flex;
  width: 400px;
}

.flex-item:first-child {
  flex: 1;
}

.long-text {
  white-space: nowrap; /* Flexアイテムが縮まない問題が発生 */
}

/* ✅ 正しい Flexbox 実装 */
.flex-container {
  display: flex;
  width: 400px;
  align-items: center;
}

.flex-item:first-child {
  flex: 1;
  min-width: 0; /* 重要：Flexアイテムの縮小を許可 */
  overflow: hidden;
}

.long-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* インライン要素の場合は block に変更 */
}

.flex-item:last-child {
  flex-shrink: 0; /* ボタンのサイズを維持 */
  margin-left: 12px;
}

/* Grid レイアウトでの対処法 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  width: 400px;
}

.grid-text-area {
  min-width: 0; /* 重要：Grid アイテムの縮小を許可 */
  overflow: hidden;
}

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

min-width / max-width を使った確実な制御

/* 包括的な制御方法 */
.text-container {
  /* 基本レイアウト */
  width: 100%;
  max-width: 500px;
  min-width: 200px;

  /* はみ出し制御 */
  overflow: hidden;

  /* 高さも制御する場合 */
  height: auto;
  max-height: 60px;
}

.controlled-text {
  /* テキスト制御 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* サイズ制御 */
  width: 100%;
  max-width: 100%;
  min-width: 0;

  /* フォント制御 */
  font-size: 16px;
  line-height: 1.5;

  /* ボックスモデル */
  box-sizing: border-box;
  padding: 8px 12px;
  margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .text-container {
    min-width: 150px;
    max-width: 100%;
  }

  .controlled-text {
    font-size: 14px;
    padding: 6px 10px;
  }
}

ブラウザ別（Chrome, Safari, Edge, Firefox）対応と互換性の注意点

主要ブラウザでの挙動の違い

/* 基本的なクロスブラウザ対応 */
.cross-browser-nowrap {
  /* 基本設定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Safari 対応 */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;

  /* Firefox 対応 */
  -moz-text-overflow: ellipsis;

  /* IE 11 対応（サポート終了だが参考として） */
  -ms-text-overflow: ellipsis;
}

/* 各ブラウザの特殊ケース対応 */

/* Chrome / Edge (Chromium) */
@supports (-webkit-appearance: none) {
  .chrome-specific {
    /* Chrome固有の調整があれば記述 */
    text-rendering: optimizeLegibility;
  }
}

/* Firefox */
@-moz-document url-prefix() {
  .firefox-specific {
    /* Firefox固有の調整 */
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Safari */
@supports (-webkit-touch-callout: none) {
  .safari-specific {
    /* Safari固有の調整 */
    -webkit-font-smoothing: antialiased;
  }
}

ベンダープレフィックスと代替手法

/* 包括的なベンダープレフィックス対応 */
.vendor-prefix-complete {
  /* 標準プロパティ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Webkit系（Safari, Chrome, Edge） */
  -webkit-white-space: nowrap;
  -webkit-text-overflow: ellipsis;

  /* Mozilla系（Firefox） */
  -moz-white-space: nowrap;
  -moz-text-overflow: ellipsis;

  /* Microsoft系（旧Edge, IE） */
  -ms-white-space: nowrap;
  -ms-text-overflow: ellipsis;
}

/* 複数行対応のクロスブラウザ実装 */
.multiline-ellipsis {
  /* 現代的なブラウザ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  /* フォールバック（古いブラウザ） */
  max-height: 3em; /* line-height × 行数 */
  line-height: 1.5;
}

/* JavaScript フォールバック付き */
.js-ellipsis {
  position: relative;
}

.js-ellipsis.no-support {
  /* CSSが対応していない場合のJavaScriptフォールバック */
  white-space: normal;
  overflow: hidden;
  max-height: 1.5em;
}

.js-ellipsis.no-support::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: white;
  padding-left: 20px;
}

ブラウザテスト用のCSS

/* ブラウザテスト・デバッグ用スタイル */
.browser-test {
  border: 2px solid transparent;
  padding: 10px;
  margin: 10px 0;
}

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0)
  and (min-resolution: 0.001dpcm) {
  .browser-test {
    border-color: #4285f4; /* Chrome blue */
  }
  .browser-test::before {
    content: 'Chrome/Edge: ';
    font-weight: bold;
    color: #4285f4;
  }
}

/* Firefox */
@-moz-document url-prefix() {
  .browser-test {
    border-color: #ff7139; /* Firefox orange */
  }
  .browser-test::before {
    content: 'Firefox: ';
    font-weight: bold;
    color: #ff7139;
  }
}

/* Safari */
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee))
  and (not (-ms-ime-align: auto)) {
  .browser-test {
    border-color: #007aff; /* Safari blue */
  }
  .browser-test::before {
    content: 'Safari: ';
    font-weight: bold;
    color: #007aff;
  }
}

実践的なテスト手順

<!-- ブラウザテスト用のHTML -->
<div class="test-suite">
  <div class="test-case browser-test">
    <div class="test-content">
      <span class="nowrap-test">
        テストテキスト：非常に長いテキストがここに配置されてブラウザごとの挙動を確認します
      </span>
    </div>
  </div>
</div>

.test-suite {
  max-width: 300px;
  margin: 20px auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
               sans-serif;
}

.test-case {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.nowrap-test {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: white;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

これらのチェックポイントを事前に確認することで、ブラウザ間での一貫した動作を確保し、ユーザー体験の質を向上させることができます。次のセクションでは、読者からよく寄せられる質問とその回答をまとめていきます。

よくある質問（FAQ）

CSSの折り返し禁止に関して、読者の皆さんから寄せられるよくある質問とその詳細な回答をまとめました。実際の開発現場で遭遇する具体的な問題から、SEOやアクセシビリティへの影響まで、幅広くカバーしています。

まとめ

この記事では、CSSでテキストの折り返しを禁止するための包括的なテクニックをご紹介しました。white-space: nowrap;という一見シンプルなプロパティですが、実際の実装では様々な課題に直面することがあります。しかし、適切な知識と対処法を身につけることで、美しく機能的なWebデザインを実現できるようになります。

これらのテクニックを身につけることで、テキストが予期しない場所で改行されてデザインが崩れるという、多くの開発者が経験する悩みから解放されます。特に、商品名や追跡コード、URLなど、絶対に途中で切れてはいけない文字列を扱う際には、今回ご紹介した手法が大きな威力を発揮するでしょう。

また、単純に折り返しを禁止するだけでなく、text-overflow: ellipsis;による省略表示や、overflow: auto;によるスクロール機能の実装など、ユーザビリティを向上させる応用テクニックも習得できたかと思います。これらの知識は、プロフェッショナルなWeb制作において必要不可欠なスキルです。

今後Web開発を進める中で、テキストのレイアウトに関する問題に直面した際は、ぜひこの記事を参考にしていただき、ユーザーにとって読みやすく美しいWebサイトの構築にお役立てください。適切な折り返し制御は、見た目の美しさだけでなく、情報の伝達効率やアクセシビリティの向上にも大きく貢献します。

継続的な学習と実践を通じて、より洗練されたCSSスキルを身につけ、ユーザーに愛されるWebサイト作りを目指していきましょう。

知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp

はじめにあるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…（３点リーダー）として表示されます。WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis...

watashi.xyz

2024.02.23