text-overflow: ellipsis は、テキストが要素の幅を超えたときに末尾を「…」で省略できる便利なCSSプロパティです。しかし実際の制作現場では、「指定しているのに効かない」「一部の環境だけ省略されない」といったトラブルが頻発します。これは ellipsis 自体の問題ではなく、関連プロパティや要素の構造条件を満たしていないことが原因です。本記事では、text-overflow: ellipsis が効かない代表的な原因と、その正しい解決方法を実務視点で整理します。
text-overflowが動作するための前提条件
text-overflow: ellipsis は単体では機能しません。テキストが「はみ出している状態」であり、かつ「表示を制御されている要素」に対してのみ有効になります。そのため、overflow と white-space の指定が揃っていないと、省略は発生しません。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
この3点セットが揃っていない場合、ellipsis が表示されないのは正常な挙動です。
要素に幅が指定されていない
text-overflow は、テキストが要素の「横幅を超えた」ときに初めて作用します。そのため、width や max-width が指定されていない要素では、文字が自然に横に広がり、省略が発生しません。特に block 要素や flex 子要素では、この問題が起こりやすくなります。
.title {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
固定幅でなくても、親要素の制約によって幅が確定していれば問題ありませんが、「どこかで横幅が決まっているか」は必ず確認する必要があります。
display: inline 要素に指定している
span などの inline 要素に text-overflow を指定しても、省略は発生しません。inline 要素は幅の概念を持たないため、オーバーフローが発生しないからです。この場合は、inline-block もしくは block に変更する必要があります。
.bad {
display: inline;
text-overflow: ellipsis;
}
.good {
display: inline-block;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
flexbox環境で効かないケース
flexbox 配下では、text-overflow が効かないケースが非常に多く見られます。これは flex item がデフォルトで内容に応じて伸縮し、はみ出し状態が発生しないためです。特に flex: 1 や auto レイアウトでは注意が必要です。
この場合、min-width: 0 を指定することで、子要素が親の幅を超えても縮小され、省略が正しく動作するようになります。
.flex {
display: flex;
}
.flex .text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
複数行で省略しようとしている
text-overflow: ellipsis は、1行テキスト専用のプロパティです。複数行の文章に対して指定しても、省略は発生しません。複数行で省略したい場合は、別の仕組みを使う必要があります。
WebKit系ブラウザでは、-webkit-line-clamp を使った方法が実務上よく採用されます。
.multiline {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
ただし、この方法は仕様として完全に標準化されていないため、用途や対応ブラウザを考慮したうえで採用すべきです。
overflowがvisibleになっている
親要素や対象要素に overflow: visible が指定されていると、テキストははみ出しても表示され続けるため、ellipsis は機能しません。CSSリセットや共通スタイルで overflow が上書きされていないかを確認することが重要です。
実務で確認すべきチェックポイント
ellipsis が効かない場合は、white-space、overflow、width、display、flex設定の順で確認すると原因を特定しやすくなります。多くの場合、プロパティの不足ではなく「効く前提条件を満たしていない」ことが原因です。
まとめ
text-overflow: ellipsis は、条件さえ整えば確実に動作するプロパティですが、単独で指定しても機能しない点が最大の落とし穴です。幅の確定、overflow の制御、white-space の指定、そして flexbox 環境での min-width 対応まで含めて設計することで、実務でも安定して省略表示を実現できます。動かない場合は「なぜ省略される必要がない状態なのか」を疑うことが、正しい解決への近道です。
