MENU
  1. ホーム
  2. CSS
  3. 【CSS】ellipsisの使い方：テキストを省略・複数行や効かない時の対策

【CSS】ellipsisの使い方：テキストを省略・複数行や効かない時の対策

CSS
css-ellipsis
ポートフォリオ向けサーバー
HTML/CSSスキルが活きる！
学んだ知識を活かして、
自分だけのブログを始めませんか？

WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。

ブログ向けサーバー4選を見る

Webデザインにおいて、限られたスペースに長いテキストを美しく収める「三点リーダー（…）」の省略表現は必須のテクニックです。

本記事では、基本の1行・複数行の省略、Flexboxでの突き抜け対策、TableやGridでの挙動、UXを高めるツールチップ実装まで実務で役立つtext-overflow: ellipsisを解説します。

HTML/CSS学習者の方へ
「学んだコード、自分のブログで試してみませんか？」
多くのブロガーがデザインでつまずく中、コードが読めるあなたは圧倒的に有利です。
自由自在なサイト構築の第一歩となる、初心者向けサーバーを分かりやすく比較しました。

＼ スキルを活かして情報発信 ／ ブログ向けレンタルサーバー4選を読む▶︎
目次

CSSでテキストを「…」で省略！text-overflowの基本

ブログの記事一覧カードや表（テーブル）の中の長いタイトルなど、限られたスペースにテキストを綺麗に収めたい場面はWeb制作で発生します。

そのような時に、はみ出した文字をバッサリ切るのではなく、ellipsis（三点リーダー「…」）で省略表記にするのがtext-overflowの役割です。

省略のCSSを理解すれば、長いテキストが親要素の幅を超えそうな場合でも、レイアウトを崩さずに直感的な省略を実装できます。

ここでは、実務で使えるellipsisの実装例を交えながら、省略の基本ルールからカスタマイズまで解説します。

CSSでテキストを「…」で省略！text-overflowの基本
  • 1行のテキストを三点リーダーで省略する必須3点セット
  • 中央で省略・色や指定文字数のカスタムは可能？

1行のテキストを三点リーダーで省略する必須3点セット

1行のテキストを三点リーダーで省略するellipsisは、使用頻度の高い基本です。

省略を表現するには、単にtext-overflow: ellipsis;を書くだけでは機能しません。

必ず「折り返し禁止」「はみ出し部分を隠す」「省略記号を出す」という3つのプロパティをセットで記述する必要があります。

これがellipsisの基本原理です。

1行省略を実装するには、white-space: nowrap;（折り返し禁止）、overflow: hidden;、text-overflow: ellipsis;の3つをセットで記述することです。

さらに、対象の要素が『インライン要素以外』であり、かつ『限界となる横幅』を持っているかを必ず確認すること」です。

⭕️ 1行省略（truncate）は「width」「nowrap」「hidden」が揃って初めて発動する！

❌ 罠の指定（折り返し）

css truncate with ellipsis を実装しようとしましたが、長すぎて折り返してしまいました。

❌ インラインの罠

css truncate text with ellipsis をインライン要素に指定しても効きません。

⭕️ 成功（美しい1行省略）

これが完璧な必須3点セットによる「css ellipsis truncate」の美しい省略実装です。
/* ❌ 罠1：折り返し禁止（nowrap）や overflow: hidden が抜けている */
.txt-fail {
  width: 250px;
  text-overflow: ellipsis; /* 🚨 これ単体では絶対に機能しない！ */
}

/* ❌ 罠2：spanタグなどのインライン要素に指定している */
.txt-inline-fail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 🚨 インライン要素はwidthを持てないため省略されない！ */
}

/* ⭕️ width制約を持たせ、必須3点セットを全て記述する！ */
.txt-success {
  display: block; /* 💡 インライン要素なら inline-block などに変える */
  width: 250px; /* 💡 どこで切るかの限界幅を指定（max-widthでも可） */
  white-space: nowrap; /* 💡 ① 絶対に改行させない */
  overflow: hidden; /* 💡 ② はみ出た部分を隠す */
  text-overflow: ellipsis; /* 💡 ③ 隠れた部分を「…」にする */
}
HTMLコード表示
<div class="ellipsis-basic-wrapper">
  
  <p class="ellipsis-caption">⭕️ 1行省略（truncate）は「width」「nowrap」「hidden」が揃って初めて発動する！</p>

  <div class="ellipsis-demo-area">
    
    <div class="demo-box">
      <p class="demo-title">❌ 罠の指定（折り返し）</p>
      <div class="txt-fail">
        css truncate with ellipsis を実装しようとしましたが、長すぎて折り返してしまいました。
      </div>
    </div>

    <div class="demo-box">
      <p class="demo-title">❌ インラインの罠</p>
      <span class="txt-inline-fail">
        css truncate text with ellipsis をインライン要素に指定しても効きません。
      </span>
    </div>

    <div class="demo-box">
      <p class="demo-title">⭕️ 成功（美しい1行省略）</p>
      <div class="txt-success">
        これが完璧な必須3点セットによる「css ellipsis truncate」の美しい省略実装です。
      </div>
    </div>

  </div>

  <div class="ellipsis-code-area">
    <span class="hl-comment">/* ❌ 罠1：折り返し禁止（nowrap）や overflow: hidden が抜けている */</span><br>
    <span class="hl-blue">.txt-fail</span> {<br>
      <span class="hl-green">width:</span> <span class="hl-red">250px;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span> <span class="hl-comment">/* 🚨 これ単体では絶対に機能しない！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ❌ 罠2：spanタグなどのインライン要素に指定している */</span><br>
    <span class="hl-blue">.txt-inline-fail</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span> <span class="hl-comment">/* 🚨 インライン要素はwidthを持てないため省略されない！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ width制約を持たせ、必須3点セットを全て記述する！ */</span><br>
    <span class="hl-blue">.txt-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">block;</span> <span class="hl-comment">/* 💡 インライン要素なら inline-block などに変える */</span><br>
      <span class="hl-green">width:</span> <span class="hl-red">250px;</span> <span class="hl-comment">/* 💡 どこで切るかの限界幅を指定（max-widthでも可） */</span><br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span> <span class="hl-comment">/* 💡 ① 絶対に改行させない */</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span> <span class="hl-comment">/* 💡 ② はみ出た部分を隠す */</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span> <span class="hl-comment">/* 💡 ③ 隠れた部分を「…」にする */</span><br>
    }
  </div>

</div>
CSSコード表示
.ellipsis-basic-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.ellipsis-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.ellipsis-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.demo-box {
  width: 100%;
  max-width: 300px;
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.demo-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #dc3545;
  border-bottom: 1px dashed #ced4da;
  padding-bottom: 5px;
}

.demo-box:last-child .demo-title {
  color: #198754;
}

/* ＝＝＝ ❌ 罠1：セットが欠けている ＝＝＝ */
.txt-fail {
  width: 100%;
  background-color: #f8d7da;
  color: #842029;
  padding: 8px;
  font-size: 14px;
  /* 🚨 nowrapとhiddenがないので普通に改行されてしまう */
  text-overflow: ellipsis; 
}

/* ＝＝＝ ❌ 罠2：インライン要素 ＝＝＝ */
.txt-inline-fail {
  /* spanのまま（display: inline） */
  background-color: #fff3cd;
  color: #664d03;
  padding: 8px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 🚨 インラインなので親の枠を突き抜けて右へはみ出していく */
}

/* ＝＝＝ ⭕️ 成功：必須3点セット ＝＝＝ */
.txt-success {
  display: block; /* もしくは inline-block */
  width: 100%; /* 親のpaddingを除いた幅を限界とする */
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 8px;
  font-size: 14px;
  font-weight: bold;
  box-sizing: border-box;
  
  /* 💡 完璧な必須3点セット */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ＝コード解説エリア（エディタ風）＝ */
.ellipsis-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

white-spaceやoverflowの使い方を詳しく知りたい人は以下から一読ください。

中央で省略・色や指定文字数のカスタムは可能？

CSSでの省略を覚えると、「語尾ではなく真ん中を省略したい」「三点リーダーの色だけ変えたい」「指定した文字数で省略したい」といった高度なellipsisの要望が出てきます。

また、入力欄のプレースホルダーやホバー時に省略を展開するellipsisアニメーションも実務でよく使われます。

高度な省略を実装するには、CSSには中央省略プロパティがないため、Flexboxを使って『省略する左側の要素』と『省略せずに幅を維持する右側の要素』の2つのタグに分けて疑似的に中央の省略を再現することです。

また、inputのplaceholderに対してもtext-overflowは有効に働くため、スマホ対応などで忘れずに指定しておくことです。

⭕️ 中央省略（middle）はFlexboxで「左を省略、右を死守」の2分割で作れ！

css ellipsis middle (中央省略)

my_important_document_final_version .pdf

※親の幅を狭めると「…」の後に「.pdf」が残ります

css placeholder ellipsis

/* ⭕️ 中央省略は親をFlexにし、左右で役割を分ける！ */
.middle-container {
  display: flex; /* 💡 横並びにする */
}
.truncate-left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 💡 左側（ファイル名）だけを省略させる */
}
.truncate-right {
  white-space: nowrap;
  flex-shrink: 0; /* 💡 右側（拡張子）は絶対に縮ませないよう死守する */
}

/* ⭕️ プレースホルダーにも text-overflow は効く！ */
.input-demo::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ※ちなみに css ellipsis color は、全体の色(color)に依存するため「…」だけ色を変えることは通常不可能です */
HTMLコード表示
<div class="custom-ellipsis-wrapper">
  
  <p class="custom-ellipsis-caption">⭕️ 中央省略（middle）はFlexboxで「左を省略、右を死守」の2分割で作れ！</p>

  <div class="custom-demo-area">
    
    <div class="custom-box">
      <p class="custom-label">css ellipsis middle (中央省略)</p>
      
      <div class="middle-truncate-container">
        <span class="truncate-left">my_important_document_final_version</span>
        <span class="truncate-right">.pdf</span>
      </div>
      <p class="custom-note">※親の幅を狭めると「...」の後に「.pdf」が残ります</p>
    </div>

    <div class="custom-box">
      <p class="custom-label">css placeholder ellipsis</p>
      <input type="text" class="placeholder-demo" placeholder="この非常に長いプレースホルダーテキストはスマホなどで入力欄が狭い時に「…」で省略されます">
    </div>

  </div>

  <div class="custom-code-area">
    <span class="hl-comment">/* ⭕️ 中央省略は親をFlexにし、左右で役割を分ける！ */</span><br>
    <span class="hl-blue">.middle-container</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span> <span class="hl-comment">/* 💡 横並びにする */</span><br>
    }<br>
    <span class="hl-blue">.truncate-left</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span> <span class="hl-comment">/* 💡 左側（ファイル名）だけを省略させる */</span><br>
    }<br>
    <span class="hl-blue">.truncate-right</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">flex-shrink:</span> <span class="hl-red">0;</span> <span class="hl-comment">/* 💡 右側（拡張子）は絶対に縮ませないよう死守する */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ プレースホルダーにも text-overflow は効く！ */</span><br>
    <span class="hl-blue">.input-demo::placeholder</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }<br>
    <span class="hl-comment">/* ※ちなみに css ellipsis color は、全体の色(color)に依存するため「…」だけ色を変えることは通常不可能です */</span>
  </div>

</div>
CSSコード表示
.custom-ellipsis-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.custom-ellipsis-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.custom-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.custom-box {
  width: 100%;
  max-width: 350px;
}

.custom-label {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #0d6efd;
}

.custom-note {
  margin: 8px 0 0 0;
  font-size: 11px;
  color: #666;
}

/* ＝＝＝ 💡 1. Flexboxを使った中央省略ハック ＝＝＝ */
.middle-truncate-container {
  /* わざと幅を狭くして省略を誘発する */
  width: 250px; 
  background-color: #fff;
  border: 1px solid #0d6efd;
  padding: 10px;
  border-radius: 6px;
  color: #333;
  font-family: monospace;
  font-size: 14px;
  
  /* 💡 必須：Flexboxで横並びにする */
  display: flex;
}

.truncate-left {
  /* 💡 左側は必須3点セットで語尾を省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-right {
  /* 💡 右側（拡張子）は折り返しを禁じ、Flexの縮小率を0にして幅を死守する */
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: bold;
  color: #dc3545; /* 拡張子が残っていることを分かりやすく赤色に */
}


/* ＝＝＝ 💡 2. プレースホルダーの省略 ＝＝＝ */
.placeholder-demo {
  width: 100%;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 💡 inputの文字自体ではなく、プレースホルダーに対して3点セットをかける */
.placeholder-demo::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #adb5bd;
}

/* ＝コード解説エリア（エディタ風）＝ */
.custom-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携

2行・3行など複数行で省略する

ブログの記事一覧にある「抜粋文」や、ECサイトの商品説明文など、現代のWebデザインにおいて「1行だけで省略する」ケースよりも、「ある程度のテキストを読ませてから省略する」という要望の方が圧倒的に多くなっています。

これこそが css ellipsis 複数 行（複数行での三点リーダー省略）の技術であり、css multiple line ellipsis や css ellipsis multiline と呼ばれるテクニックです。 かつてはJavaScriptを使って文字数を計算したり、高さを制御したりと非常に泥臭い実装が必要だった css text overflow ellipsis multiline（css text overflow ellipsis multiple lines / css multi line text overflow ellipsis）ですが、現在では css ellipsis line clamp（-webkit-line-clamp プロパティ）を使うことで、CSSのみで驚くほど簡単に実装できるようになりました。

2行・3行など複数行で省略する
  • 2行目や3行目で省略する具体例

2行目や3行目で省略する具体例

-webkit-line-clampを使えば、-webkit-line-clampで2行で切ることも3行で切ることも、数値を書き換えるだけで自由に制御できます。

2行目での省略はカード型レイアウトのタイトルに、3行目での省略は説明文やリード文に実務でよく使われます。

複数行省略を実装するには、「①white-space: nowrap;は外すこと。②heightで高さを固定せず、行数（line-clamp）に高さを委ねること。③必須であるdisplay: -webkit-box;、-webkit-box-orient: vertical;、overflow: hidden;をセットで記述し、必要であればAutoprefixerの削除を防ぐコメント（/* autoprefixer: ignore next */など）を追記してコードを守ること」です。

⭕️ 複数行省略（line-clamp）は、「必須4点セット」をコピペしろ！

❌ 罠の指定（nowrap残存）

css text ellipsis after 2 lines を実装したかったのに、1行省略の時の「white-space: nowrap;」を消し忘れたため、複数行にならずに1行目でぶつ切りになってしまっている残念な例です。

⭕️ 成功（2行目で省略）

このテキストは「css ellipsis two lines」を完璧に実装した例です。指定した通り、しっかりと2行目（css ellipsis on second line）の最後で三点リーダーが表示され、以降の文章は美しく隠されています。カードのタイトルなどに最適です。

⭕️ 成功（3行目で省略）

このテキストは「css ellipsis after 3 lines」を完璧に実装した例です。ブログ記事の抜粋文や、商品の説明文など、少し長めの文章をユーザーに読ませつつ、レイアウトを崩さないように3行目でスマートに省略（3 line text ellipsis css）しています。
/* ❌ 罠：1行省略の癖で「white-space: nowrap;」を書いてしまう */
.clamp-fail {
  white-space: nowrap; /* 🚨 ここが原因で絶対に折り返されず1行になる */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ⭕️ 複数行省略はこの「4点セット」を使う！ */
.clamp-2lines {
  display: -webkit-box; /* 💡 必須1 */
  -webkit-box-orient: vertical; /* 💡 必須2（ツールに消されないよう注意） */
  -webkit-line-clamp: 2; /* 💡 必須3：ここで「行数」を指定する！ */
  overflow: hidden; /* 💡 必須4 */
}

.clamp-3lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 💡 3行にしたい時はここを「3」にするだけ！ */
  overflow: hidden;
}
HTMLコード表示
<div class="line-clamp-wrapper">
  
  <p class="line-clamp-caption">⭕️ 複数行省略（line-clamp）は、「必須4点セット」をコピペしろ！</p>

  <div class="line-clamp-demo-area">
    
    <div class="clamp-box">
      <p class="clamp-title">❌ 罠の指定（nowrap残存）</p>
      <div class="clamp-fail">
        css text ellipsis after 2 lines を実装したかったのに、1行省略の時の「white-space: nowrap;」を消し忘れたため、複数行にならずに1行目でぶつ切りになってしまっている残念な例です。
      </div>
    </div>

    <div class="clamp-box">
      <p class="clamp-title">⭕️ 成功（2行目で省略）</p>
      <div class="clamp-success-2lines">
        このテキストは「css ellipsis two lines」を完璧に実装した例です。指定した通り、しっかりと2行目（css ellipsis on second line）の最後で三点リーダーが表示され、以降の文章は美しく隠されています。カードのタイトルなどに最適です。
      </div>
    </div>

    <div class="clamp-box">
      <p class="clamp-title">⭕️ 成功（3行目で省略）</p>
      <div class="clamp-success-3lines">
        このテキストは「css ellipsis after 3 lines」を完璧に実装した例です。ブログ記事の抜粋文や、商品の説明文など、少し長めの文章をユーザーに読ませつつ、レイアウトを崩さないように3行目でスマートに省略（3 line text ellipsis css）しています。
      </div>
    </div>

  </div>

  <div class="line-clamp-code-area">
    <span class="hl-comment">/* ❌ 罠：1行省略の癖で「white-space: nowrap;」を書いてしまう */</span><br>
    <span class="hl-blue">.clamp-fail</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span> <span class="hl-comment">/* 🚨 ここが原因で絶対に折り返されず1行になる */</span><br>
      <span class="hl-green">display:</span> <span class="hl-red">-webkit-box;</span><br>
      <span class="hl-green">-webkit-box-orient:</span> <span class="hl-red">vertical;</span><br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">2;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 複数行省略はこの「4点セット」を使う！ */</span><br>
    <span class="hl-blue">.clamp-2lines</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">-webkit-box;</span> <span class="hl-comment">/* 💡 必須1 */</span><br>
      <span class="hl-green">-webkit-box-orient:</span> <span class="hl-red">vertical;</span> <span class="hl-comment">/* 💡 必須2（ツールに消されないよう注意） */</span><br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">2;</span> <span class="hl-comment">/* 💡 必須3：ここで「行数」を指定する！ */</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span> <span class="hl-comment">/* 💡 必須4 */</span><br>
    }<br><br>

    <span class="hl-blue">.clamp-3lines</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">-webkit-box;</span><br>
      <span class="hl-green">-webkit-box-orient:</span> <span class="hl-red">vertical;</span><br>
      <span class="hl-green">-webkit-line-clamp:</span> <span class="hl-red">3;</span> <span class="hl-comment">/* 💡 3行にしたい時はここを「3」にするだけ！ */</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
    }
  </div>

</div>
CSSコード表示
.line-clamp-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.line-clamp-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.line-clamp-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.clamp-box {
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.clamp-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #198754;
  border-bottom: 1px dashed #ced4da;
  padding-bottom: 5px;
}

.clamp-box:first-child .clamp-title {
  color: #dc3545;
}

/* ＝＝＝ ❌ 罠：nowrapを指定してしまう ＝＝＝ */
.clamp-fail {
  background-color: #f8d7da;
  color: #842029;
  padding: 10px;
  font-size: 14px;
  line-height: 1.6;
  
  /* 🚨 nowrapのせいで複数行にならず突き抜けるか1行で切れる */
  white-space: nowrap; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ＝＝＝ ⭕️ 成功：2行目で省略 ＝＝＝ */
.clamp-success-2lines {
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 10px;
  font-size: 14px;
  line-height: 1.6;
  
  /* 💡 完璧な必須4点セット（nowrapは書かない！） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ＝＝＝ ⭕️ 成功：3行目で省略 ＝＝＝ */
.clamp-success-3lines {
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 10px;
  font-size: 14px;
  line-height: 1.6;
  
  /* 💡 3行にするには数値を書き換えるだけ */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ＝コード解説エリア（エディタ風）＝ */
.line-clamp-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

Flexbox・Grid・Tableでellipsisを効かせる

基本的な1行・複数行の省略をマスターしても、実務で最新のレイアウト手法（FlexboxやGrid）や表組み（Table）の中にテキストを配置すると、「なぜか省略が効かず、レイアウトが崩れてしまう」という壁にぶつかります。

これは、それぞれのレイアウト手法が持つ「要素のサイズ計算ルールの違い」が原因です。

ここでは、モダンなWeb制作で頻出するFlexboxで効かない問題の解決策、表計算やグリッドレイアウトにおける省略テクニックまで解説します。

Flexbox・Grid・Tableでellipsisを効かせる
  • Flexbox環境で省略が効かない！突き抜ける時の解決策
  • TableやGrid内で文字を省略する

Flexbox環境で省略が効かない！突き抜ける時の解決策

横並びレイアウトの定番であるFlexboxにおいて、ellipsisを実装しようとすると、ほぼ100%の初心者が「テキストが省略されず、親要素の幅を押し広げて画面外へ突き抜けてしまう」という現象に遭遇します。

これは、ellipsisを指定した子要素（フレックスアイテム）に対して、ブラウザがデフォルトでmin-width: auto;（中身のテキストの長さを最小幅とする）という暗黙のルールを適用しているためです。

このルールがある限り、どれだけ親要素の幅を制限しても、ellipsisは発動しません。

Flexbox内でテキストを省略するには、「省略させたいテキストが入っているフレックスアイテム（子要素）に対して、min-width: 0;を明示的に指定し、ブラウザの『中身の幅より小さくならない』という初期ルールを強制解除すること」です。

⭕️ Flexboxで省略が効かない時は「width」ではなく「min-width: 0;」を疑え！

❌ 罠（突き抜ける）

👤
この非常に長いユーザー名は、Flexboxの仕様により省略されずに親の枠を無慈悲に突き抜けていきます。

⭕️ 成功（min-width: 0; を指定）

👤
このテキストは「min-width: 0;」のおかげで、アイコンの横幅を確保したまま美しく三点リーダーで省略されます。
/* 💡 親要素（Flexコンテナ） */
.flex-container {
  display: flex;
  align-items: center;
}

/* ❌ 罠：Flexアイテムに「min-width: 0」がない */
.flex-item-fail {
  /* 🚨 暗黙の min-width: auto; が働き、中のテキストの長さに引っ張られて縮まない！ */
}

/* ⭕️ Flexアイテムに「min-width: 0;」を必ず追加する！ */
.flex-item-success {
  min-width: 0; /* 💡 中身に関わらず縮むことを許可する */
  flex: 1; /* 残りの幅をいっぱいに使う */
}

/* 💡 共通の省略テキスト指定 */
.flex-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
HTMLコード表示
<div class="flex-ellipsis-wrapper">
  
  <p class="flex-ellipsis-caption">⭕️ Flexboxで省略が効かない時は「width」ではなく「min-width: 0;」を疑え！</p>

  <div class="flex-demo-area">
    
    <div class="demo-flex-box">
      <p class="flex-title">❌ 罠（突き抜ける）</p>
      <div class="flex-container">
        <div class="flex-icon">👤</div>
        <div class="flex-item-fail">
          <div class="flex-text text-red">
            この非常に長いユーザー名は、Flexboxの仕様により省略されずに親の枠を無慈悲に突き抜けていきます。
          </div>
        </div>
      </div>
    </div>

    <div class="demo-flex-box">
      <p class="flex-title">⭕️ 成功（min-width: 0; を指定）</p>
      <div class="flex-container">
        <div class="flex-icon">👤</div>
        <div class="flex-item-success">
          <div class="flex-text text-green">
            このテキストは「min-width: 0;」のおかげで、アイコンの横幅を確保したまま美しく三点リーダーで省略されます。
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="flex-code-area">
    <span class="hl-comment">/* 💡 親要素（Flexコンテナ） */</span><br>
    <span class="hl-blue">.flex-container</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">align-items:</span> <span class="hl-red">center;</span><br>
    }<br><br>

    <span class="hl-comment">/* ❌ 罠：Flexアイテムに「min-width: 0」がない */</span><br>
    <span class="hl-blue">.flex-item-fail</span> {<br>
      <span class="hl-comment">/* 🚨 暗黙の min-width: auto; が働き、中のテキストの長さに引っ張られて縮まない！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ Flexアイテムに「min-width: 0;」を必ず追加する！ */</span><br>
    <span class="hl-blue">.flex-item-success</span> {<br>
      <span class="hl-green">min-width:</span> <span class="hl-red">0;</span> <span class="hl-comment">/* 💡 中身に関わらず縮むことを許可する */</span><br>
      <span class="hl-green">flex:</span> <span class="hl-red">1;</span> <span class="hl-comment">/* 残りの幅をいっぱいに使う */</span><br>
    }<br><br>

    <span class="hl-comment">/* 💡 共通の省略テキスト指定 */</span><br>
    <span class="hl-blue">.flex-text</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }
  </div>

</div>
CSSコード表示
.flex-ellipsis-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.flex-ellipsis-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.flex-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.demo-flex-box {
  width: 100%;
  max-width: 350px;
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.flex-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #dc3545;
  border-bottom: 1px dashed #ced4da;
  padding-bottom: 5px;
}

.demo-flex-box:last-child .flex-title {
  color: #198754;
}

/* ＝＝＝ Flexboxのレイアウト ＝＝＝ */
.flex-container {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #f8f9fa;
  border: 1px solid #adb5bd;
  padding: 8px;
  border-radius: 4px;
}

.flex-icon {
  font-size: 24px;
  background-color: #e9ecef;
  padding: 5px;
  border-radius: 50%;
  flex-shrink: 0; /* アイコンは絶対に縮ませない */
}

/* ＝＝＝ 💡 共通のテキスト省略設定 ＝＝＝ */
.flex-text {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-red { color: #842029; }
.text-green { color: #0f5132; }

/* ＝＝＝ ❌ 罠：突き抜けるFlexアイテム（ラッパー） ＝＝＝ */
.flex-item-fail {
  /* 🚨 min-width: 0 がないため、中身の長いテキストに引っ張られて縮めない */
}

/* ＝＝＝ ⭕️ 成功：Flexアイテム（ラッパー） ＝＝＝ */
.flex-item-success {
  /* 💡 子要素（テキスト）がどれだけ長くても、縮むことを許可する */
  min-width: 0; 
  flex: 1; /* 残りのスペースを埋める */
}

/* ＝コード解説エリア（エディタ風）＝ */
.flex-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

Flexboxの使い方を詳しく知りたい人は「【CSS】flexの使い方：justify-content・align-items・gap」を一読ください。

【CSS】flexの使い方：justify-content・align-items・gap

TableやGrid内で文字を省略する

テーブルやグリッドレイアウトも、Flexboxと同様にブラウザの「自動計算ルール」が邪魔をして省略が効かない代表格です。

特にテーブルレイアウトにおいて、<td>や<th>は「中身のテキストがすべて表示できるようにセル自体の幅を広げる」という強固な仕様を持っています。

そのため、セルに対して単にtext-overflow: ellipsis;を指定しても、セル自体が限界まで伸びてしまうだけで省略は起こりません。

また、グリッドレイアウトにおいても、グリッドアイテムがautoの最小幅を持つため、設定を怠るとグリッド全体が崩壊します。

TableやGridで省略を効かせるには、Tableの場合は大枠の<table>要素に対してtable-layout: fixed;とwidth: 100%;等を指定し、セルの自動拡張を殺すことです。

Gridの場合は、grid-template-columnsの指定時に1frではなくminmax(0, 1fr)を使うか、グリッドアイテム側に min-width: 0; を指定して最小幅をゼロにすることです。

⭕️ Tableは「table-layout: fixed」、Gridは「minmax(0, 1fr)」で枠をガチガチに固めろ！

css table cell ellipsis

タイトル このテーブルセル内の非常に長いテキストデータは、table-layout:fixedのおかげで完璧に省略されます。

css grid ellipsis

詳細
このグリッドアイテム内の長文も、minmax(0, 1fr)の指定により、レイアウトを破壊することなく綺麗に収まります。
/* ⭕️ テーブルは「table-layout: fixed;」でセルの自動拡張を殺す！ */
.demo-table {
  width: 100%;
  table-layout: fixed; /* 💡 必須：これでtdのwidthが厳格に守られる */
}
.demo-td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 💡 必須3点セットがここで活きる */
}

/* ⭕️ Gridは「minmax(0, 1fr)」で最小幅を0にする！ */
.demo-grid {
  display: grid;
  /* 🚨 罠：「100px 1fr」と書くと 1fr がコンテンツ幅で広がってしまう */
  /* 💡 成功：1fr の代わりに minmax(0, 1fr) を指定する！ */
  grid-template-columns: 100px minmax(0, 1fr);
}
.grid-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
HTMLコード表示
<div class="grid-table-wrapper">
  
  <p class="grid-table-caption">⭕️ Tableは「table-layout: fixed」、Gridは「minmax(0, 1fr)」で枠をガチガチに固めろ！</p>

  <div class="grid-table-demo-area">
    
    <div class="layout-box">
      <p class="layout-title">css table cell ellipsis</p>
      <table class="demo-table">
        <tbody><tr>
          <th class="demo-th">タイトル</th>
          <td class="demo-td">このテーブルセル内の非常に長いテキストデータは、table-layout:fixedのおかげで完璧に省略されます。</td>
        </tr>
      </tbody></table>
    </div>

    <div class="layout-box">
      <p class="layout-title">css grid ellipsis</p>
      <div class="demo-grid">
        <div class="grid-label">詳細</div>
        <div class="grid-text">このグリッドアイテム内の長文も、minmax(0, 1fr)の指定により、レイアウトを破壊することなく綺麗に収まります。</div>
      </div>
    </div>

  </div>

  <div class="grid-table-code-area">
    <span class="hl-comment">/* ⭕️ テーブルは「table-layout: fixed;」でセルの自動拡張を殺す！ */</span><br>
    <span class="hl-blue">.demo-table</span> {<br>
      <span class="hl-green">width:</span> <span class="hl-red">100%;</span><br>
      <span class="hl-green">table-layout:</span> <span class="hl-red">fixed;</span> <span class="hl-comment">/* 💡 必須：これでtdのwidthが厳格に守られる */</span><br>
    }<br>
    <span class="hl-blue">.demo-td</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span> <span class="hl-comment">/* 💡 必須3点セットがここで活きる */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ Gridは「minmax(0, 1fr)」で最小幅を0にする！ */</span><br>
    <span class="hl-blue">.demo-grid</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">grid;</span><br>
      <span class="hl-comment">/* 🚨 罠：「100px 1fr」と書くと 1fr がコンテンツ幅で広がってしまう */</span><br>
      <span class="hl-comment">/* 💡 成功：1fr の代わりに minmax(0, 1fr) を指定する！ */</span><br>
      <span class="hl-green">grid-template-columns:</span> <span class="hl-red">100px minmax(0, 1fr);</span><br>
    }<br>
    <span class="hl-blue">.grid-text</span> {<br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }
  </div>

</div>
CSSコード表示
.grid-table-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grid-table-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grid-table-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.layout-box {
  width: 100%;
  max-width: 400px;
}

.layout-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #0d6efd;
}

/* ＝＝＝ 💡 1. Tableでの省略 ＝＝＝ */
.demo-table {
  width: 100%;
  border-collapse: collapse;
  
  /* 💡 テーブルレイアウトを固定化する */
  table-layout: fixed; 
}

.demo-table th, .demo-table td {
  border: 1px solid #ced4da;
  padding: 10px;
  background-color: #fff;
  font-size: 14px;
}

.demo-th {
  width: 80px; /* thの幅を固定 */
  background-color: #e9ecef !important;
  color: #333;
}

.demo-td {
  color: #0f5132;
  
  /* 💡 セルの中身を省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ＝＝＝ 💡 2. CSS Gridでの省略 ＝＝＝ */
.demo-grid {
  /* 💡 1fr の最小値を 0 に強制する */
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr); 
  
  border: 1px solid #ced4da;
  background-color: #fff;
  border-radius: 4px;
}

.grid-label {
  background-color: #e9ecef;
  padding: 10px;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #ced4da;
  text-align: center;
  font-weight: bold;
}

.grid-text {
  padding: 10px;
  color: #0f5132;
  font-size: 14px;
  
  /* 💡 グリッドアイテムの中身を省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ＝コード解説エリア（エディタ風）＝ */
.grid-table-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

Grid・Tableの使い方を詳しく知りたい人は以下から一読ください。

ellipsisが効かない！表示されない原因とチェックリスト

「記事の通りにCSSを書いたはずなのに、ellipsisが効かない」「三点リーダーが表示されずテキストが突き抜ける！」 というトラブルが日常茶飯事です。

text-overflow: ellipsis;は、単独で記述しても機能しません。

他の関連プロパティや要素の仕様と密接に絡み合っているため、一つでも条件が欠けると効かないという事態に陥ります。

ここでは、省略が効かない時に見直すべき2つの大きな原因と解決策を解説します。

ellipsisが効かない！表示されない原因とチェックリスト
  • widthやoverflow: hiddenが指定されていない
  • white-space: nowrap（1行の場合）を書き忘れている

widthやoverflow: hiddenが指定されていない

省略記号（…）を表示させる絶対条件は、「テキストが親要素の枠（幅）をはみ出していること」そして「はみ出した部分が隠されていること」です。

つまり、限界となるwidth（またはmax-width）の指定と、はみ出しをカットするoverflow: hidden;が必須となります。

幅と非表示設定では、省略を効かせたい要素がインライン要素（aやspan）である場合は、display: inline-block;またはdisplay: block;を追記して幅を持てる状態にすることです。

その上で、どこで省略させるかのwidthとはみ出しを隠すoverflow: hidden;をセットで記述することです。

⭕️ 要素がインライン（span/a）なら、まずは「ブロック化」して幅を持たせろ！

❌ 罠（インライン要素）

インライン要素はwidthを持てないため、親の枠を無視してどこまでも突き抜けていきます。

⭕️ 成功（inline-block化）

displayを変更して幅を持たせれば、spanタグでも美しく三点リーダーで省略されます。
/* ❌ 罠：span要素にそのまま指定しても幅が効かない */
.txt-span-fail {
  width: 200px; /* 🚨 インライン要素なので完全に無視される */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⭕️ displayを変更し、widthとoverflow:hiddenを確実に効かせる！ */
.txt-span-success {
  display: inline-block; /* 💡 必須：幅を持てるようにする */
  width: 100%; /* 💡 親要素に対して100%など、限界幅を決める */
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden; /* 💡 必須：はみ出しを隠す */
  text-overflow: ellipsis;
}
HTMLコード表示
<div class="check-width-wrapper">
  
  <p class="check-width-caption">⭕️ 要素がインライン（span/a）なら、まずは「ブロック化」して幅を持たせろ！</p>

  <div class="check-demo-area">
    
    <div class="check-box">
      <p class="check-title">❌ 罠（インライン要素）</p>
      <span class="txt-span-fail">
        インライン要素はwidthを持てないため、親の枠を無視してどこまでも突き抜けていきます。
      </span>
    </div>

    <div class="check-box">
      <p class="check-title">⭕️ 成功（inline-block化）</p>
      <span class="txt-span-success">
        displayを変更して幅を持たせれば、spanタグでも美しく三点リーダーで省略されます。
      </span>
    </div>

  </div>

  <div class="check-code-area">
    <span class="hl-comment">/* ❌ 罠：span要素にそのまま指定しても幅が効かない */</span><br>
    <span class="hl-blue">.txt-span-fail</span> {<br>
      <span class="hl-green">width:</span> <span class="hl-red">200px;</span> <span class="hl-comment">/* 🚨 インライン要素なので完全に無視される */</span><br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ displayを変更し、widthとoverflow:hiddenを確実に効かせる！ */</span><br>
    <span class="hl-blue">.txt-span-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">inline-block;</span> <span class="hl-comment">/* 💡 必須：幅を持てるようにする */</span><br>
      <span class="hl-green">width:</span> <span class="hl-red">100%;</span> <span class="hl-comment">/* 💡 親要素に対して100%など、限界幅を決める */</span><br>
      <span class="hl-green">max-width:</span> <span class="hl-red">200px;</span><br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span> <span class="hl-comment">/* 💡 必須：はみ出しを隠す */</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }
  </div>

</div>
CSSコード表示
.check-width-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.check-width-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.check-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.check-box {
  width: 100%;
  max-width: 300px;
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.check-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #dc3545;
  border-bottom: 1px dashed #ced4da;
  padding-bottom: 5px;
}

.check-box:last-child .check-title {
  color: #198754;
}

/* ＝＝＝ ❌ 罠：インライン要素での指定 ＝＝＝ */
.txt-span-fail {
  background-color: #f8d7da;
  color: #842029;
  font-size: 14px;
  /* 🚨 display指定がないため、幅が効かず突き抜ける */
  width: 200px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ＝＝＝ ⭕️ 成功：ブロック化して指定 ＝＝＝ */
.txt-span-success {
  background-color: #d1e7dd;
  color: #0f5132;
  font-size: 14px;
  
  /* 💡 幅を持たせて、あふれを隠す */
  display: inline-block;
  width: 100%;
  max-width: 250px;
  vertical-align: middle; /* inline-block時のズレ防止 */
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ＝コード解説エリア（エディタ風）＝ */
.check-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

要素の性質を決めるdisplayの使い方を詳しく知りたい人は「【CSS】displayの種類は？flexやinline-blockの違い」を一読ください。

【CSS】displayの種類は？flexやinline-blockの違い

white-space: nowrap（1行の場合）を書き忘れている

widthもoverflow: hidden;も指定したのに省略記号が出ない場合、次に疑うべきは「テキストが途中で折り返されていないか」です。

テキストが指定した幅に到達した際、下に改行（折り返し）してしまえば、横方向への「はみ出し」は発生しません。

はみ出さなければ、text-overflow: ellipsis;は発動しないです。

1行省略を発動させるには、どれだけ長いテキストであっても強制的に1行のまま右へ突き進ませるために、white-space: nowrap; 記述することです。

これにより、意図的に横方向への『はみ出し』を作り出し、三点リーダーを強制発動させることです。

⭕️ 1行で省略したいなら「white-space: nowrap;」で強制的に改行を禁止しろ！

❌ 罠（折り返し発生）

このテキストはnowrapが指定されていないため、右端に到達すると自然に下へと折り返してしまい、省略記号が出ません。

⭕️ 成功（nowrap指定）

white-space: nowrap; を指定することで、どれだけ長くても強制的に1行になり、三点リーダーが美しく表示されます。
/* ❌ 罠：折り返しが許可されているため、横にはみ出さない */
.txt-wrap-fail {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 🚨 nowrapがないため、下に改行されてしまう */
}

/* ⭕️ 強制的に1行にして、横へのはみ出しを作り出す！ */
.txt-wrap-success {
  display: block;
  width: 100%;
  white-space: nowrap; /* 💡 必須：絶対に改行させない */
  overflow: hidden;
  text-overflow: ellipsis;
}
HTMLコード表示
<div class="check-nowrap-wrapper">
  
  <p class="check-nowrap-caption">⭕️ 1行で省略したいなら「white-space: nowrap;」で強制的に改行を禁止しろ！</p>

  <div class="check-demo-area">
    
    <div class="check-box">
      <p class="check-title">❌ 罠（折り返し発生）</p>
      <div class="txt-wrap-fail">
        このテキストはnowrapが指定されていないため、右端に到達すると自然に下へと折り返してしまい、省略記号が出ません。
      </div>
    </div>

    <div class="check-box">
      <p class="check-title">⭕️ 成功（nowrap指定）</p>
      <div class="txt-wrap-success">
        white-space: nowrap; を指定することで、どれだけ長くても強制的に1行になり、三点リーダーが美しく表示されます。
      </div>
    </div>

  </div>

  <div class="check-code-area">
    <span class="hl-comment">/* ❌ 罠：折り返しが許可されているため、横にはみ出さない */</span><br>
    <span class="hl-blue">.txt-wrap-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">block;</span><br>
      <span class="hl-green">width:</span> <span class="hl-red">100%;</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
      <span class="hl-comment">/* 🚨 nowrapがないため、下に改行されてしまう */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 強制的に1行にして、横へのはみ出しを作り出す！ */</span><br>
    <span class="hl-blue">.txt-wrap-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">block;</span><br>
      <span class="hl-green">width:</span> <span class="hl-red">100%;</span><br>
      <span class="hl-green">white-space:</span> <span class="hl-red">nowrap;</span> <span class="hl-comment">/* 💡 必須：絶対に改行させない */</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }
  </div>

</div>
CSSコード表示
.check-nowrap-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.check-nowrap-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.check-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.check-box {
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.check-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #dc3545;
  border-bottom: 1px dashed #ced4da;
  padding-bottom: 5px;
}

.check-box:last-child .check-title {
  color: #198754;
}

/* ＝＝＝ ❌ 罠：nowrapなしで改行される ＝＝＝ */
.txt-wrap-fail {
  background-color: #f8d7da;
  color: #842029;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  
  /* 🚨 nowrapがないため、ただの複数行テキストになる */
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ＝＝＝ ⭕️ 成功：nowrapで1行を強制 ＝＝＝ */
.txt-wrap-success {
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  
  /* 💡 ：強制的に1行にして省略を発動させる */
  display: block;
  width: 100%;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ＝＝＝ 💡 コード解説エリア用のCSS ＝＝＝ */
.check-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

ツールチップ表示（hover）の実装

テキストを三点リーダー（…）で省略するテクニックは、レイアウトを美しく保つために不可欠です。

しかし、ユーザー視点に立つと「省略された続きの文章が読めない」というのは、時として大きなフラストレーションに繋がります。

省略（ellipsis）と全文表示のニーズを両立させるために実務で多用されるのが、ホバー時のツールチップ実装です。

ここでは、省略されたテキストに対するスマートな全文表示のUX改善を解説します。

ツールチップ表示（hover）の実装
  • ホバー時（hover）にツールチップで全文を表示するUX改善

ホバー時（hover）にツールチップで全文を表示するUX改善

省略されたテキストにマウスを乗せた際、隠れていた全文をフワッと表示させるツールチップは、ユーザーフレンドリーなWebサイトに欠かせない実装です。

簡単な方法はHTMLのtitle属性を使うことですが、ブラウザによって表示デザインが異なり、表示されるまでのタイムラグもあるため、実務ではCSSのみでツールチップを自作するケースが多くなります。

ツールチップを自作するには、『ツールチップを配置する親要素』と『省略を適用する子要素』の役割を分離することです。

親要素にはposition: relative;を持たせてツールチップを絶対配置し、overflow: hidden;をかけるのは中のテキスト要素だけに限定することで、見切れバグを防ぐことができます。

⭕️ ホバーしてみよう！ツールチップを出すなら「親」と「省略する子」の構造を分けろ！

❌ 罠（見切れて消える）

これが省略された全文です。しかし見切れてしまいます。

⭕️ 成功（構造を分離）

これが省略された全文です。見切れずに美しく表示されます！
/* ❌ 罠：省略要素自身にツールチップを発生させる */
.txt-fail {
  overflow: hidden; /* 🚨 はみ出しを隠す設定 */
  text-overflow: ellipsis;
}
.txt-fail::after {
  content: attr(data-text);
  position: absolute; /* 🚨 親の overflow: hidden によって枠外が切り取られる！ */
}

/* ⭕️ 親（ラッパー）と子（省略）で役割を分担する！ */
.wrapper-success {
  position: relative; /* 💡 ツールチップの基準点 */
  /* 💡 ここには overflow: hidden を書かないので見切れない！ */
}
.txt-success {
  overflow: hidden; /* 💡 子要素だけで省略を完結させる */
  text-overflow: ellipsis;
}
/* 💡 ツールチップは「親要素」の疑似要素として発生させる */
.wrapper-success:hover::after {
  content: attr(data-text);
  position: absolute;
  top: -30px;
}
HTMLコード表示
<div class="tooltip-basic-wrapper">
  
  <p class="tooltip-caption">⭕️ ホバーしてみよう！ツールチップを出すなら「親」と「省略する子」の構造を分けろ！</p>

  <div class="tooltip-demo-area">
    
    <div class="demo-tooltip-box">
      <p class="tooltip-title">❌ 罠（見切れて消える）</p>
      <div class="txt-tooltip-fail" data-text="これが省略された全文です。しかし見切れてしまいます。">
        これが省略された全文です。しかし見切れてしまいます。
      </div>
    </div>

    <div class="demo-tooltip-box">
      <p class="tooltip-title">⭕️ 成功（構造を分離）</p>
      <div class="txt-tooltip-wrapper" data-text="これが省略された全文です。見切れずに美しく表示されます！">
        <div class="txt-tooltip-success">
          これが省略された全文です。見切れずに美しく表示されます！
        </div>
      </div>
    </div>

  </div>

  <div class="tooltip-code-area">
    <span class="hl-comment">/* ❌ 罠：省略要素自身にツールチップを発生させる */</span><br>
    <span class="hl-blue">.txt-fail</span> {<br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span> <span class="hl-comment">/* 🚨 はみ出しを隠す設定 */</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }<br>
    <span class="hl-blue">.txt-fail::after</span> {<br>
      <span class="hl-green">content:</span> <span class="hl-red">attr(data-text);</span><br>
      <span class="hl-green">position:</span> <span class="hl-red">absolute;</span> <span class="hl-comment">/* 🚨 親の overflow: hidden によって枠外が切り取られる！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 親（ラッパー）と子（省略）で役割を分担する！ */</span><br>
    <span class="hl-blue">.wrapper-success</span> {<br>
      <span class="hl-green">position:</span> <span class="hl-red">relative;</span> <span class="hl-comment">/* 💡 ツールチップの基準点 */</span><br>
      <span class="hl-comment">/* 💡 ここには overflow: hidden を書かないので見切れない！ */</span><br>
    }<br>
    <span class="hl-blue">.txt-success</span> {<br>
      <span class="hl-green">overflow:</span> <span class="hl-red">hidden;</span> <span class="hl-comment">/* 💡 子要素だけで省略を完結させる */</span><br>
      <span class="hl-green">text-overflow:</span> <span class="hl-red">ellipsis;</span><br>
    }<br>
    <span class="hl-comment">/* 💡 ツールチップは「親要素」の疑似要素として発生させる */</span><br>
    <span class="hl-blue">.wrapper-success:hover::after</span> {<br>
      <span class="hl-green">content:</span> <span class="hl-red">attr(data-text);</span><br>
      <span class="hl-green">position:</span> <span class="hl-red">absolute;</span><br>
      <span class="hl-green">top:</span> <span class="hl-red">-30px;</span><br>
    }
  </div>

</div>
CSSコード表示
.tooltip-basic-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.tooltip-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.tooltip-demo-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background-color: #e9ecef;
  padding: 60px 20px 30px 20px; /* 上にツールチップが出る余白を確保 */
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
}

.demo-tooltip-box {
  width: 100%;
  max-width: 300px;
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.tooltip-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: bold;
  color: #dc3545;
  border-bottom: 1px dashed #ced4da;
  padding-bottom: 5px;
}

.demo-tooltip-box:last-child .tooltip-title {
  color: #198754;
}

/* ＝＝＝ ❌ 罠：要素自身にツールチップ ＝＝＝ */
.txt-tooltip-fail {
  position: relative;
  background-color: #f8d7da;
  color: #842029;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  
  /* 省略の必須3点セット */
  white-space: nowrap;
  overflow: hidden; /* 🚨 これがツールチップを殺す原因 */
  text-overflow: ellipsis;
}

/* ホバー時のツールチップ（見切れて見えない） */
.txt-tooltip-fail:hover::after {
  content: attr(data-text);
  position: absolute;
  top: -35px;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* ＝＝＝ ⭕️ 成功：ラッパーと省略要素の分離 ＝＝＝ */
/* 💡 親ラッパー（ツールチップの基準点） */
.txt-tooltip-wrapper {
  position: relative;
  cursor: pointer;
  /* 💡 ここにoverflow:hiddenは絶対に書かない！ */
}

/* 💡 子要素（テキストの省略） */
.txt-tooltip-success {
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 8px;
  font-size: 14px;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 💡 ツールチップは「親ラッパー」に持たせる */
.txt-tooltip-wrapper:hover::after {
  content: attr(data-text);
  position: absolute;
  top: -35px;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 10;
}

/* ＝コード解説エリア（エディタ風）＝ */
.tooltip-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

tooltipのデザインを確認したい人は「【HTML/CSS】コピペ！吹き出し風ツールチップデザイン5選」を一読ください。

【HTML/CSS】コピペ！吹き出し風ツールチップデザイン5選

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 1行の省略設定
    width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis をセットで指定する。
  • インライン要素の対応
    spanやaタグは幅を持てないため、display: blockまたはinline-blockに変更する。
  • 複数行の省略
    nowrapを外し、-webkit-line-clamp: 行数;を含む-webkit-box関連の必須プロパティを使用する。
  • Flexboxでの突き抜け
    省略させたいフレックスアイテムにmin-width: 0;を指定し、ブラウザの自動拡張（auto）を解除する。
  • Tableレイアウトでの省略
    table要素にtable-layout: fixed;を指定し、セルの自動拡張を無効化する。
  • CSS Gridでの省略
    grid-template-columns等で1frではなくminmax(0, 1fr)を指定し、最小幅を制限する。
  • 中央（文字の途中）での省略
    CSS単体では不可。
    Flexboxを用い、省略しない要素をflex-shrink: 0;で固定して疑似的に実装する。
  • ツールチップの実装
    ツールチップが見切れるのを防ぐため、overflow: hiddenをかけるテキスト要素とツールチップの基準となる親要素を分離する。

よくある質問（FAQ）

text-overflow: ellipsisを指定したのに「…」になりません。なぜですか？

最も多い原因は、必須プロパティの指定漏れか、要素がインライン要素（<span>や<a>など）になっていることです。

1行で省略記号を出すには、text-overflow: ellipsis;に加えて、white-space: nowrap;（折り返し禁止）とoverflow: hidden;（はみ出しを隠す）をセットで記述する必要があります。

また、要素がインライン要素の場合は幅を持てないため、display: block;またはinline-block;を指定し、限界となるwidth（幅）を設定してください。

1行ではなく、2行や3行など複数行で省略することは可能ですか？

はい、-webkit-line-clampプロパティを使用することで可能です。

複数行で省略する場合は、1行省略で使ったwhite-space: nowrap;を必ず削除してください。

その上で、対象の要素にdisplay: -webkit-box;、-webkit-box-orient: vertical;、overflow: hidden;の3つを指定し、-webkit-line-clamp: 2;（2行の場合）と記述することで、指定した行数で美しく省略されます。

Flexboxの中で使おうとすると、省略されずに枠を突き抜けてしまいます。

Flexboxの子要素には、中身のテキストより小さく縮まない「min-width: auto;」という暗黙のルールが働いているためです。

省略を効かせたい要素に対して、CSSで明示的にmin-width: 0;を追加指定してください。

これによりブラウザの自動計算ルールが解除され、親要素の幅に合わせて正しく三点リーダーで省略されるようになります。

テキストの語尾ではなく、ファイル名のように「中央」を省略できますか？

CSSのプロパティ単体で中央を正確に省略する（例：text-overflow: middle;）機能は現在のところ存在しません。

代替案として、Flexboxを使用して要素を左右に2分割するハックが実務でよく使われます。

省略してもよい左側（ファイル名部分）にのみellipsisの省略設定をかけ、表示させたい右側（拡張子部分）にはflex-shrink: 0;を指定して幅を死守することで、擬似的な中央省略を再現できます。

省略されたテキストの全文をマウスホバー時に表示させるにはどうすればいいですか？

最も手軽なのは、HTMLタグにtitle="全文"属性を追記してブラウザ標準のツールチップを出す方法です。

もしCSSでオリジナルのツールチップを自作する場合は注意が必要です。

省略テキスト自体にoverflow: hidden;がかかっているため、そこにツールチップを作ると見切れてしまいます。

「ツールチップを出す基準となる親要素」と「省略設定をする子要素」にHTML構造を分けて実装してください。

CONTACT

サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。

お問い合わせページへ
WordPress移行
Webサイトを公開しよう！

「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。

おすすめサーバー4選を見る
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次