CreaTools LogoCreaTools
Tech Notes
Text Truncate

text-overflow が効かない時のチェックリスト

2025-10-08

まずここを疑え

90%の原因は「幅が指定されていない」か「Flexboxのmin-width問題」。

/* この2つを追加して動くか試す */
max-width: 200px;  /* または親要素に幅指定 */
min-width: 0;      /* Flex/Gridアイテムの場合 */

即決フロー

┌─────────────────────────────────────────┐
│ 省略されない？                           │
└─────────────────────────────────────────┘
        ↓
┌─────────────────────────────────────────┐
│ 幅（width / max-width）を指定した？      │
└─────────────────────────────────────────┘
        ↓ No
┌─────────────────────────────────────────┐
│ ✓ max-width を追加                       │
└─────────────────────────────────────────┘

        ↓ Yes（それでも効かない）
┌─────────────────────────────────────────┐
│ Flexbox / Grid のアイテム？              │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ min-width: 0 を追加                   │
└─────────────────────────────────────────┘

        ↓ No（それでも効かない）
┌─────────────────────────────────────────┐
│ 3プロパティ全部ある？                    │
│ ・white-space: nowrap                   │
│ ・overflow: hidden                      │
│ ・text-overflow: ellipsis               │
└─────────────────────────────────────────┘
        ↓ No
┌─────────────────────────────────────────┐
│ ✓ 足りないプロパティを追加               │
└─────────────────────────────────────────┘

必須の3プロパティ

.truncate {
  white-space: nowrap;     /* 折り返しを禁止 */
  overflow: hidden;        /* はみ出しを隠す */
  text-overflow: ellipsis; /* 省略記号を表示 */
}

この3つはセット。どれか1つでも欠けると動かない。

原因別の対処

幅が指定されていない

/* ❌ NG: 幅が無限に広がる */
.truncate {
  text-overflow: ellipsis;
}

/* ✓ OK: 幅を制限 */
.truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Flexbox の min-width 問題

Flexアイテムは min-width: auto がデフォルト。コンテンツが縮まない。

/* ❌ NG: 省略されない */
.flex-item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ✓ OK: min-width を上書き */
.flex-item {
  min-width: 0;  /* これが必要 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Grid の min-width 問題

Grid も同様。

.grid-item {
  min-width: 0;  /* これが必要 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

display: inline では効かない

インライン要素には幅の概念がない。

/* ❌ NG */
span {
  text-overflow: ellipsis;
}

/* ✓ OK */
span {
  display: inline-block;
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

line-clamp が効かない場合

4プロパティセットを確認

/* ❌ NG: 足りない */
.clamp {
  -webkit-line-clamp: 3;
}

/* ✓ OK: 4つセット */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

text-overflow と併用している

/* ❌ NG: 競合する */
.element {
  white-space: nowrap;    /* 1行に強制 */
  -webkit-line-clamp: 3;  /* 3行で省略 */
}

どちらか一方を使う。併用不可。

チェックリスト

text-overflow（1行省略）

  • white-space: nowrap がある
  • overflow: hidden がある
  • text-overflow: ellipsis がある
  • 要素に幅（width / max-width）がある
  • Flexアイテムなら min-width: 0 がある
  • Gridアイテムなら min-width: 0 がある
  • display が inline 以外になっている

line-clamp（複数行省略）

  • display: -webkit-box がある
  • -webkit-box-orient: vertical がある
  • -webkit-line-clamp: n がある
  • overflow: hidden がある
  • white-space: nowrap を使っていない

まとめ

症状原因対処
省略されない幅未指定max-width 追加
省略されないFlex/Gridmin-width: 0 追加
... が出ないoverflow: hidden がない追加
1行にならないwhite-space: nowrap がない追加
line-clampが効かない4プロパティ不足セットで追加
line-clampが効かないtext-overflowと併用どちらか一方に

まず幅とmin-widthを疑え。

関連記事