症状：ellipsisの「…」が出ない、長い文字列が折り返されない
text-overflow: ellipsis を指定したのに「…」が出ず、テキストがそのままはみ出す。あるいは長いURLや連番IDが折り返されず、テーブルやカードの幅を押し広げてしまう。どちらも実装したCSSは正しいはずなのに効かない、という相談が多い症状です。
この2つは原因が絡み合っています。「折り返されない」問題を先に解決しないと「省略されない」問題も直らないため、この記事ではまずellipsisが効かないケースをチェックリストで潰し、そのあとで折り返し（word-break / overflow-wrap）と複数行省略（line-clamp）を扱います。
ellipsisが効かないチェックリスト（3点セット）
text-overflow: ellipsis は、次の3つのプロパティが同時に揃って初めて効きます。1つでも欠けると「…」は出ません。
| プロパティ | 必要な値 | 効かないときによくある状態 |
|---|---|---|
width（または max-width） |
明確な幅がある | 幅を指定していない・親がflexで縮まず幅が確定しない |
white-space |
nowrap |
指定なし（初期値 normal）で先に折り返してしまう |
overflow |
hidden |
指定なし（初期値 visible）ではみ出したまま表示される |
加えて、要素が display: inline（デフォルトの span など、幅指定が効かない表示形式）や、flexアイテムで min-width: auto のまま縮まない状態だと、上の3つを揃えても効きません。以下、原因ごとに失敗デモと修正デモで確認します。
原因1：width（幅）が確定していない
text-overflow: ellipsis は「要素の幅を超えた分」を省略する仕組みなので、そもそも要素に確定した幅がないと「超えた」の判定ができません。display: block や display: inline-block だけの要素は幅が中身に合わせて伸びるため、width か max-width を明示していないと省略が発生しません。
white-space・overflow・ellipsisは指定済みですが、幅がないため「…」が出ずそのままはみ出します。
display: block と width: 100% で幅を確定させると「…」が出るようになります。
/* 効かない：span はデフォルト inline のため width が効かない
→ 幅が確定せず「超えた分」が発生しない */
.filename {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 直す：display: block（または inline-block）にして width を与える */
.filename {
display: block;
width: 100%; /* または max-width で固定値を指定 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
自分のケースか確認する方法：DevToolsで対象要素のComputedパネルを開き、width の実測値を確認します。親要素の幅いっぱいに広がっているように見えても、要素自体が inline のままだと幅は「中身の実寸」になっているため、display の値もあわせて確認してください。
原因2：white-spaceがnowrapになっていない
text-overflow: ellipsis は、テキストが1行に収まりきらず「はみ出した」状態でしか発動しません。white-space の初期値は normal で、幅を超えると自動的に折り返して複数行になってしまうため、そもそも「はみ出す」状況が発生せず、ellipsisの出番が来ません。
折り返して2行になるだけで「…」は出ません。overflow: hiddenは効いていますが、はみ出しが発生していないため無効化されているように見えます。
1行に強制すると、はみ出した分がellipsisで省略されます。
/* 効かない：white-space が初期値 normal のまま
→ 幅を超えると折り返すだけで、はみ出し扱いにならない */
.company-name {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
}
/* 直す：1行に強制してからellipsisを効かせる */
.company-name {
max-width: 240px;
white-space: nowrap; /* これが無いと折り返して逃げてしまう */
overflow: hidden;
text-overflow: ellipsis;
}
自分のケースか確認する方法：「2行以上に折り返って表示されている」状態であれば、ほぼこの原因です。1行に収めたいのか、複数行のまま省略したいのかで対策が分かれます（複数行のまま省略したい場合は後述の line-clamp を使います）。
原因3：flexアイテムでmin-width:autoのまま縮んでいない
flexboxのレイアウトで、flex: 1 を付けた子要素にellipsisを指定しても効かないことがあります。これはflexアイテムの min-width の初期値が auto であるためで、要素が中身の最小幅より縮まず、そもそも「幅を超えた」状態が作られません。この記事の原因1と現象は似ていますが、原因はwidth未指定ではなくflexの縮小ルールによって幅が確定しない点が異なります。
この現象はflexboxのはみ出し全般で起きる「min-width: autoの罠」の一種です。flexではみ出す・縮まない原因については、②-2の記事で詳しく扱っています。
タイトルにellipsisを指定していますが、flexアイテムが縮まないため枠からはみ出し「…」も出ません。
flexアイテムが縮められるようになり、ellipsisが正しく効きます。
.row {
display: flex;
gap: 10px;
}
/* 効かない：flexアイテムの min-width は初期値 auto
→ 中身の最小幅より縮まないため、はみ出しが発生しない */
.body {
flex: 1;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 直す：flexアイテム側に min-width: 0 を追加してから ellipsis を効かせる */
.body {
flex: 1;
min-width: 0; /* これが無いとellipsisの3点セットが揃っていても効かない */
}
自分のケースか確認する方法：ellipsisを付けた要素の親をさかのぼり、display: flex のコンテナがあれば、その直接の子（flexアイテム）のComputedパネルで min-width を確認します。auto のままなら、まずここに min-width: 0 を足してから3点セットを見直してください。
折り返されない：word-breakとoverflow-wrapの使い分け
ここからは「省略」ではなく「折り返し」自体がされない問題です。スペースを含まない長い文字列（URL・トークン・連番ID）は、通常の折り返しルールでは改行対象になりません。日本語の文章のような自然な区切りがないため、ブラウザは1行のまま伸ばし続け、親要素をはみ出させます。
これを直すプロパティは2つあり、挙動が異なります。
長いURLがそのまま1行で伸び、枠（点線）をはみ出します。初期表示ではみ出て見えない場合は、ブラウザの幅を狭めてみてください（ブラウザによっては再現しないことがあります）。
単語の区切りを優先しつつ、はみ出す箇所だけ折り返されます。
日本語混じりの文章で overflow-wrap: break-word では収まりきらないほど長い英数字が連続する場合は、より強制力の強い word-break: break-all を使います。単語の途中でも問答無用で改行するため、日本語の文章に使うと不自然な位置で切れやすい点に注意してください。
区切りのないトークン文字列でも、どの位置でも折り返せます。
/* 折り返されない：スペースのない長い文字列は自動では改行されない */
.long-text {
/* 指定なし（初期値のまま） */
}
/* 直す1：単語の区切りを優先しつつ、はみ出す場合のみ途中で改行 */
.long-text {
overflow-wrap: break-word;
}
/* 直す2：より強制的にどこでも改行する（英数字トークン向け） */
.long-text {
word-break: break-all;
}
URLやID・ハッシュ値など英数字だけの文字列には word-break: break-all、日本語を含む通常の文章には overflow-wrap: break-word。まず break-word を試し、それでも収まらない場合だけ break-all に切り替える。
自分のケースか確認する方法：はみ出している中身がスペースを含まない文字列（URL・ID・ハッシュ値）かどうかを見ます。テーブルのセルで起きている場合は、該当の td に max-width と overflow-wrap: break-word を足すのが定番です。
複数行で省略したい場合：line-clamp
text-overflow: ellipsis は1行の省略にしか使えません。カードの説明文やコメント一覧のように「3行まで表示して、あふれた分は…で省略したい」という場合は、-webkit-line-clamp を使います。ベンダープレフィックス付きの名前ですが、主要ブラウザ（Chrome・Edge・Safari・Firefox）はすべて対応しています。
overflow-wrapだけでは行数の制限がなく、全文がそのまま表示されます。
今回のリニューアルでは在庫管理画面のパフォーマンスを重点的に改善しました。検索条件を保持したままページ遷移できるようになり、大量データの一覧表示でもスクロールが滑らかになっています。あわせてエクスポート機能の対応形式も拡充しました。
3行を超えた分が「…」で省略されます。
今回のリニューアルでは在庫管理画面のパフォーマンスを重点的に改善しました。検索条件を保持したままページ遷移できるようになり、大量データの一覧表示でもスクロールが滑らかになっています。あわせてエクスポート機能の対応形式も拡充しました。
/* 省略されない：折り返すだけで行数制限がない */
.description {
overflow-wrap: break-word;
}
/* 直す：line-clamp で行数を指定して省略する */
.description {
display: -webkit-box; /* box表示にしないとline-clampが効かない */
-webkit-line-clamp: 3; /* 表示する行数 */
-webkit-box-orient: vertical; /* 縦方向のboxとして扱う */
overflow: hidden; /* あふれた分を隠す（これも必須） */
}
-webkit-line-clamp が効くには display: -webkit-box と -webkit-box-orient: vertical と overflow: hidden の3つがセットで必要です。1行のellipsisと同じく、必要なプロパティが1つでも欠けると省略が発生しません。標準化された line-clamp（プレフィックスなし）も一部ブラウザで実装が進んでいますが、実務では現時点で互換性の高い -webkit- 版を使うのが無難です。
まとめ
テキストの折り返し・省略が効かないときは、次の順で確認すると早く原因にたどり着けます。
1行省略が効かない → width・white-space: nowrap・overflowの3点セットを確認 → flexの中ならmin-width: 0も確認。折り返し自体がされない → overflow-wrapかword-breakを追加。複数行で省略したい → line-clampの3点セット（box表示・box-orient・overflow）を確認。
ellipsisは「幅を超えたら省略する」仕組みなので、幅が確定していない・1行に強制されていない・flexで縮まっていないのいずれかがあると発動しません。原因を1つずつ潰していけば、業務アプリでよく出るテーブルやカードの省略トラブルはほぼ解決します。
同じシリーズの関連記事
「効かない・動かない」トラブル解決シリーズの記事です。症状から原因を切り分けたいときにあわせてどうぞ。
関連するUI事例
テーブルやカードでのテキスト省略・折り返し制御を、実際に動くコードで確認できる事例です。