CSSのtext-overflow: ellipsisが効かない｜文字の省略条件と指定する要素の確認手順

text-overflow: ellipsis;を追加したのに、文字が「…」にならない。枠からはみ出したり、途中で切れるだけになったりすると、どのCSSを直せばよいか迷います。

この指定は、文字を強制的に短くする命令ではありません。文字が収まりきらない幅と、その文字を表示する要素への指定がそろって初めて、省略記号が表示されます。

この記事では、パソコンで自分のページのHTML・CSSを編集できる方に向けて、横書きの文字を1行で省略する条件と、指定する要素を説明します。症状に合う箇所を確認し、修正後の表示と保存結果まで判断できるように進めます。2行以上の省略は別の方法です。

症状別の確認先

最初に、今の表示に近い症状を選びます。短い文字がすべて収まっている場合は、省略記号が出なくても正常です。各修正は候補なので、すべてを順番に試す必要はありません。直ったら保存後の確認へ進み、条件を満たせば終了します。

今の表示	まず確認すること	本文の確認先
2行以上に折り返される	white-spaceがnowrapか	省略の基本条件
右端で切れるだけ	文字要素のtext-overflow	指定する要素
span・aの幅が変わらない	displayがinlineのままか	インライン要素
横並びにすると、枠ごとはみ出す	文字を包むFlexアイテムの幅	Flexbox内の確認
コードは合っていそうなのに変わらない	実際の適用値と選択した要素	開発者ツールの手順

1行で省略するCSSの基本

まずは、他のレイアウトから離れた小さな例で、指定の役割を確認します。文字を入れる要素に、幅の上限と省略に関わる指定をまとめた例です。

練習する場合は、公開サイトとは別の練習用HTMLファイルをテキストエディターで開き、HTML例を<body>内、CSS例を<head>内の<style>と</style>の間へ入れて保存します。そのHTMLファイルをブラウザーで開いて表示を確認してください。ファイルの用意から確認したい方は、HTMLの基本構造と最初のページの作り方を先に参照してください。

各例では、対応するHTMLとCSSを組み合わせます。練習用のCSSは継ぎ足さず、次の例のCSSに置き換えます。同じclass名の指定が残ると、例どおりの違いを確認できないことがあります。

自分のサイトを直す場合は、元のCSSをコピーして控えてから、該当する指定だけを変更します。.titleなどはサンプル用のclass名です。実際のHTMLに付いている名前へ読み替えてください。既存のCSS全体をサンプルで置き換えないようにしましょう。

<p class="title">CSSで長い記事タイトルを1行に収め、表示幅を超えた部分だけを省略するためのサンプル文章です。枠の幅を狭めたときの表示も確認します。</p>

.title {
  width: 20rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

remはページの基準となる文字サイズに連動する単位です。この例では幅を20remにし、狭い場所ではmax-width: 100%;で親の幅を超えないようにしています。

まずは上の長い文章で「…」が出るかを確認します。次に文字を「短いタイトル」へ変え、全文が表示されるかを見比べてください。長い文章でも収まってしまう場合は、widthを小さくして表示幅を狭めます。

指定・状態	役割
文字が表示幅を超える	省略が必要な状態を作る
white-space: nowrap	自動で折り返さず1行にする
overflow: hidden	枠からはみ出す部分を隠す
text-overflow: ellipsis	隠れる文字がある行末に「…」を示す

この例でwhite-space: nowrap;を外すと、文章は折り返せるようになります。overflow: hidden;を外すと、文字は枠の外へ表示されます。text-overflow: ellipsis;を外すと、はみ出した部分は隠れても「…」は付きません。

ただし、省略する要素へ必ずwidthを書く、という意味ではありません。親の幅やレイアウトによって表示幅が制限されていれば、子にwidthを書かなくても省略できます。反対に、枠が文字に合わせて広がる状態では、3つの指定だけを足しても期待どおりになりません。

幅と最大幅の使い分けは、width・height・max-width・min-heightの基本で確認できます。

プロパティの役割と適用対象は、MDNのtext-overflowの解説にもまとまっています。省略記号自体を置けないほど幅が狭い場合は、記号も見えなくなることがあります。

CSSを指定する要素の確認

親の枠と文字の要素を分ける

次のHTMLでは、外側の.boxが親要素、文字を持つ.titleが子要素です。文字の行を作っているのは内側のpなので、省略の指定もそこへ置きます。

<div class="box">
  <p class="title">CSSで長い記事タイトルを1行に収め、表示幅を超えた部分だけを省略するためのサンプル文章です。枠の幅を狭めたときの表示も確認します。</p>
</div>

親だけに3つの指定を書いた、次の状態から確認してみましょう。white-spaceは子に引き継がれますが、text-overflowは通常、子へ引き継がれません。この構造では、外側で文字が切れても、子の行末に省略記号を付ける指定が足りません。

/* 指定先を間違えた例 */
.box {
  width: 20rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

修正では、幅を決める役割を親に残し、文字の省略を子へ移します。.box > .titleの>は、.boxのすぐ内側にある子要素のうち、.titleが付いた要素を選ぶ記号です。

.box {
  width: 20rem;
  max-width: 100%;
}

.box > .title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span・aなどのインライン要素

spanやaは通常、文章の流れに沿って並ぶインライン要素です。そのままでは、通常の幅指定や省略用の枠を作れません。表示方法を変えたうえで幅を制限します。

<span class="title">CSSで長い記事タイトルを1行に収め、表示幅を超えた部分だけを省略するためのサンプル文章です。枠の幅を狭めたときの表示も確認します。</span>

.title {
  display: block;
  width: 20rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

文章中の並びを保ったまま幅を持たせたい場合は、display: inline-block;も候補です。見た目の配置も変わるため、周囲との並びを確認して選びます。block・inline・inline-blockの違いを先に押さえると、指定先を判断しやすくなります。

Flexbox内で省略されない場合

普通のブロックでは省略できるのに、ラベルとタイトルを横並びにすると枠ごとはみ出す。その場合は、文字のCSSに加えて、文字を包むFlexアイテムの最小幅を確認します。

Flexアイテムとは、display: flex;を指定した要素の直下にある子要素です。次の例では、.row__labelと.row__bodyが該当します。.row__titleは、さらにその内側です。

<div class="row">
  <span class="row__label">記事</span>
  <div class="row__body">
    <p class="row__title">CSSで長い記事タイトルを1行に収め、表示幅を超えた部分だけを省略するためのサンプル文章です。枠の幅を狭めたときの表示も確認します。</p>
  </div>
</div>

.row {
  display: flex;
  gap: 0.75rem;
  width: 20rem;
  max-width: 100%;
}

.row__label {
  flex: none;
}

.row__body {
  flex: 1;
  min-width: 0;
}

.row__title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

flex: 1;は、ここではラベル以外の残り幅を文字側へ割り当てる指定です。ただし、Flexアイテムのmin-widthは初期状態がautoで、内容に基づく最小幅が縮小を妨げる場合があります。min-width: 0;は、その最小幅の下限を0にして、空いている幅に合わせて縮められるようにする指定です。要素の幅を必ず0にするわけではなく、実際の幅は親の幅やFlexboxの配置によって決まります。

縮める指定は.row__body、文字の省略は.row__titleと役割を分けるのが、この構造でのポイントです。タイトル側だけへmin-width: 0;を追加しても、外側のFlexアイテムが広いままなら解決しません。

さらに外側もFlexboxになっている場合は、同じように親をたどり、幅を保っているFlexアイテムを探します。すべての祖先へ一括でmin-width: 0;を足すのではなく、縮小を妨げている要素を確認して修正します。

自動最小幅の扱いはMDNのmin-widthの解説で確認できます。親と直下の子の関係がまだ曖昧なら、Flexboxのdisplay: flexと配置の基本も参考になります。

開発者ツールでの確認と修正後のチェック

コードを見比べても原因が分からないときは、ブラウザーが実際に採用した値を調べます。ここではパソコン版Chromeを例にします。開発者ツールは、ページのHTMLやCSSを調べるための機能です。

画面の見方は、Chrome DevToolsのCSS機能リファレンスで確認できます。表示名は言語設定などで多少異なりますが、StylesとComputedを目印に探せます。

保存後の確認

保存後にページを再読み込みし、次の状態を確認します。省略記号だけでなく、周囲のレイアウトと読める内容も合わせて見ます。

• 長い文字では1行で「…」になり、枠や隣のラベルが押し出されない。
• 短い文字では全文が表示され、不要な「…」が付かない。
• ブラウザーの幅を狭めても、ページ全体に横スクロールが出ない。
• 記事名や商品名など、省略した全文を必要に応じて詳細ページなどで確認できる。

よくある質問

width: 100%を指定すれば省略できますか？

それだけでは決まりません。100%の基準となる親の幅が制限され、文字がその表示幅を超えている必要があります。親やFlexアイテムが文字に合わせて広がる場合は、親のレイアウトや最小幅も確認してください。

2行目の末尾を「…」にできますか？

この記事のwhite-space: nowrap;を使う方法は1行向けです。2行など行数で省略する場合は、line-clampなど別の方法を検討します。高さだけを小さくしてtext-overflowを足しても、下にはみ出した文章の末尾へ記号を付ける指定にはなりません。

省略された元の文字は消えますか？

このCSSは表示を省略するだけで、HTML内の文字列を書き換えません。内容の確認が必要な記事名などでは、全文のある詳細ページへのリンクを残すなど、読者が続きを確認できる方法も用意しましょう。

まとめ

text-overflow: ellipsis;が効かないときは、まず文字が実際に幅を超えているかを確かめ、文字を表示する要素にwhite-space・overflow・text-overflowが適用されているかを確認します。

親の枠で切れているだけなら指定先を見直し、Flexbox内で枠ごと広がるなら、文字を包むFlexアイテムの最小幅を調べます。文字側の指定→親の幅→保存後の表示の順に確かめると、不要なCSSを増やさずに修正箇所を絞れます。

修正後は、長い文字と短い文字、広い画面と狭い画面を見比べてください。省略記号が表示され、周囲が崩れず、必要な全文も確認できれば、この作業は完了です。