BLOG

text-overflow: ellipsis が効かない原因7選

2026.06.26 BLOG

text-overflow: ellipsisは、長いテキストを「…」で省略する指定です。ただし、text-overflowだけを書いても効きません。幅、折り返し、overflow、親要素の縮み方が揃って初めて動きます。

この記事では、text-overflow: ellipsisが効かない原因を7つに分けて、カードUIでそのまま試せるコード付きで解説します。

ellipsisに必要な3点セット

1行省略の基本は、overflow: hidden、text-overflow: ellipsis、white-space: nowrapの3点セットです。さらに、その要素に「省略できる幅」が必要です。

<article class="news-card">
  <img
    src="https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=480&q=80"
    alt="バスケットボール"
  >
  <div class="news-card__body">
    <p class="news-card__category">CSS DEBUG</p>
    <h2 class="news-card__title">
      text-overflow: ellipsis が効かない原因をカードUIで確認する長いタイトル
    </h2>
    <p class="news-card__text">
      省略表示は width、overflow、white-space の3点セットがそろって初めて効きます。
    </p>
  </div>
</article>

.news-card {
  display: flex;
  gap: 16px;
  max-width: 620px;
}

.news-card img {
  width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.news-card__body {
  flex: 1;
}

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

.news-card {
  display: flex;
  gap: 16px;
  max-width: 620px;
  padding: 16px;
  border: 2px solid #111;
  background: #fff;
}

.news-card img {
  flex: 0 0 160px;
  width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.news-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

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

原因1：overflow:hidden がない

text-overflowは、あふれたテキストの表示方法を決める指定です。そもそもあふれを隠していない場合、末尾の省略記号は出ません。

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

原因2：white-space:nowrap がない

1行で省略したい場合は、テキストを折り返さない指定が必要です。折り返しが許可されていると、横にはみ出す前に複数行になります。

原因3：幅が決まっていない

省略表示は「この幅を超えたら省略する」という基準が必要です。親の幅が決まっていない、またはテキスト自身が中身に合わせて広がっている場合は効きません。

原因4：Flexアイテムにmin-width:autoが残っている

Flexbox内で省略表示が効かないときの定番原因です。本文エリアにmin-width: 0を入れると、長いテキストが親幅に合わせて縮めるようになります。

.card__body {
  flex: 1 1 auto;
  min-width: 0;
}

原因5：inline要素に指定している

spanなどのinline要素は、幅やoverflowの扱いが期待通りにならないことがあります。display: blockまたはinline-blockを指定して、幅を持てる状態にします。

.label span {
  display: inline-block;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

原因6：複数行省略と混同している

text-overflow: ellipsisは基本的に1行省略の指定です。複数行で省略したい場合は、-webkit-line-clampを使う構成にします。

.summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

原因7：親要素のoverflowやgrid幅が強い

GridやFlexの子要素に長いURLやタイトルが入ると、親を押し広げてしまうことがあります。省略したい要素だけでなく、親側にもmin-width: 0が必要なケースがあります。

CodePen埋め込み用エリア

text-overflow: ellipsis の効かない原因を確認するデモ
ここにCodePenのEmbedコードを貼り付けます。Pen作成後、このブロックと埋め込みタグを差し替えてください。

CodePenでは、上のindex.htmlをHTMLパネルへ、bad.cssとgood.cssをCSSパネルへ貼り替えてください。Flex内でmin-width: 0を外すと、省略表示が崩れることを確認できます。

まとめ

text-overflow: ellipsisが効かないときは、3点セット、幅、Flex/Grid内のmin-width: 0、inline要素、複数行省略との違いを確認しましょう。特にカードUIでは、タイトル自身より親要素の設定が原因になりやすいです。

参考資料

STEP BACK