Webデザインにおいて、限られたスペースの中に長いテキストを表示しなければならない場面は非常に多く存在します。
特にスマートフォン向けの表示やカード型のレイアウトでは、テキストが溢れてデザインが崩れてしまうことを防ぐ必要があります。
このような場合に役立つのが、溢れたテキストを「…」という記号で省略する「3点リーダー」の実装です。
CSSを使用すれば、JavaScriptを使わずに軽量かつ効率的にテキストの省略処理を行うことができます。
本記事では、1行のみの省略から、近年標準化が進んだ複数行の省略方法まで、実務で即座に使える技術を詳しく解説します。
1行のテキストを3点リーダーで省略する基本設定
1行のテキストを省略して3点リーダーを表示させる方法は、CSSの古典的かつ最も安定した手法です。
この実装を成功させるためには、3つのプロパティをセットで指定することが必須条件となります。
必要不可欠な3つのプロパティ
まず、基本となるコード例を確認しましょう。
.ellipsis-single {
/* 1. テキストを折り返さず1行に固定する */
white-space: nowrap;
/* 2. 枠からはみ出た部分を非表示にする */
overflow: hidden;
/* 3. はみ出た部分を「…」に置き換える */
text-overflow: ellipsis;
/* 幅の指定が必要 */
width: 100%;
}これは非常に長い文章ですが、1行で収まるように末尾が省略されて表示されます…white-space: nowrap
white-space: nowrap;は、テキストの自動改行を無効化するためのプロパティです。
通常、テキストは親要素の幅に合わせて自動的に改行されますが、これを指定することで無理やり1行に押し込めることができます。
overflow: hidden
overflow: hidden;は、要素のボックスからはみ出したコンテンツを隠す役割を持ちます。
これがないと、テキストは1行のままボックスを突き抜けて表示されてしまいます。
text-overflow: ellipsis
text-overflow: ellipsis;が、今回の主役である「3点リーダー」を表示させるための命令です。
「ellipsis」とは省略記号という意味であり、文字が溢れた際に自動的に「…」を付与してくれます。
複数行のテキストを3点リーダーで省略する方法
ニュース記事のリード文や商品説明など、2行目や3行目の末尾で省略したいケースも多々あります。
以前はJavaScriptでの計算が必要でしたが、現在はCSSのみでline-clampというプロパティを使用して簡単に実装できます。
line-clampプロパティの活用
複数行の省略を実現するためには、以下のプロパティを組み合わせて使用します。
.ellipsis-multi {
/* 複数行表示を有効にするための古いWebkit設定 */
display: -webkit-box;
/* 表示する行数を指定（例：3行） */
-webkit-line-clamp: 3;
/* ボックス内の配置方向を垂直に設定 */
-webkit-box-orient: vertical;
/* はみ出た部分を隠す */
overflow: hidden;
}この文章は複数行の省略テストです。
2行目も問題なく表示されますが、指定した3行目の末尾に到達すると、
自動的に3点リーダーが表示される仕組みになっています…2026年現在、主要なブラウザでは標準の line-clamp プロパティとしてのサポートも進んでいますが、依然として -webkit- プレフィックスを付けた記述が最も安定して動作します。
-webkit-line-clamp の値を変えることで、1行でも2行でも任意の行数で省略が可能です。
複数行省略時の注意点
この手法を用いる際、padding（余白）の設定には注意が必要です。
特に下方向のパディング（padding-bottom）が大きいと、本来隠れるべき次の行の一部が見えてしまうことがあります。
また、要素に固定の height（高さ）を設定してしまうと、指定行数と高さの整合性が取れなくなるため、高さは auto か、行数に基づいた max-height を推奨します。
応用編：レイアウトに応じた3点リーダーの実装
3点リーダーの実装は、単純なブロック要素以外でも必要とされる場面があります。
特にフレックスボックス（Flexbox）やグリッドレイアウト（CSS Grid）内での挙動は、初心者が見落としやすいポイントです。
フレックスボックス内での省略
フレックスアイテムの中でテキストを省略しようとしても、デフォルトでは機能しないことがあります。
これは、フレックスアイテムがコンテンツの最小幅（min-width: auto）を維持しようとするためです。
解決策として、省略したいテキストを持つ要素、またはその親要素に min-width: 0; を指定する必要があります。
.flex-container {
display: flex;
}
.flex-item {
/* これを指定しないと子要素のellipsisが効かない */
min-width: 0;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}テーブル要素内での省略
HTMLの table タグ内で3点リーダーを使いたい場合、通常の指定だけではテーブルの幅が中身に合わせて伸びてしまいます。
この場合、テーブル自体に table-layout: fixed; を指定し、列の幅を固定する必要があります。
| プロパティ | 役割 | 適用対象 |
|---|---|---|
table-layout: fixed | セルの幅を固定し、内容による拡張を防ぐ | table要素 |
white-space: nowrap | セル内での改行を禁止する | td要素 |
text-overflow: ellipsis | はみ出た文字を3点リーダーにする | td要素 |
アクセシビリティと3点リーダー
3点リーダーを使用すると、視覚的にはスッキリしますが、ユーザーが全文を読めなくなるというデメリットがあります。
これを補完するために、いくつかのアクセシビリティ対応を検討しましょう。
title属性による全文表示
最も簡単な方法は、HTMLの title 属性に全文を入れておくことです。
ユーザーがマウスをホバーした際に、ブラウザ標準のツールチップで内容を確認できるようになります。
<div class="ellipsis" title="ここに全文を記述します。マウスホバーで表示されます。">
ここに全文を記述します。マウスホバーで表示されます。
</div>ARIA属性の活用
スクリーンリーダーを利用するユーザーにとって、省略されたテキストがどのように読み上げられるかは重要です。
aria-label を使用して、視覚的に省略されていても音声では全文が読み上げられるように工夫することが望ましいです。
ただし、装飾目的の3点リーダーであれば、過剰な対応はかえってノイズになることもあるため、情報の重要度に応じて判断してください。
2026年現在のブラウザ対応と最新動向
2026年現在、text-overflow: ellipsis はすべての主要ブラウザで完璧にサポートされています。
複数行の省略についても、かつてはFirefoxでの実装が遅れていましたが、現在は -webkit-line-clamp が事実上の標準としてどのブラウザでも動作します。
また、CSSの新しい仕様では、省略記号として「…」以外の任意の文字列（例えば「続きを読む」など）を指定できる text-overflow: "---" のような記法も議論されていますが、互換性を考慮するとまだ ellipsis の利用が主流です。
コンテナクエリ（Container Queries）の普及により、親要素のサイズに合わせて省略の有無を切り替えるような、より高度なレスポンシブ実装も一般的になっています。
これにより、広い画面では全文を表示し、狭い画面では自動的に3点リーダーに切り替えるといった制御がCSSのみで完結します。
実装時のよくあるトラブルと解決策
「3点リーダーが表示されない」というトラブルの多くは、基本的なスタイルの欠如に起因します。
まず、要素が display: block; または display: inline-block; になっているか確認してください。
display: inline; の要素には、幅や高さの概念がないため、overflow や text-overflow が機能しません。
次に、親要素に十分な幅が設定されているかを確認しましょう。
親要素が width: fit-content; などになっていると、中身のテキストに合わせて親要素自体が伸びてしまい、省略が発生しません。
最後に、文字コードの問題で3点リーダーが文字化けしたり、フォントによって見え方が異なったりする場合もあります。
標準的なゴシック体や明朝体を使用していれば大きな問題にはなりませんが、特殊なWebフォントを使用している場合は、事前に表示テストを行うことを推奨します。
まとめ
CSSによる3点リーダーの実装は、ユーザーインターフェースの品質を高めるために欠かせないテクニックです。
1行の省略には white-space: nowrap、overflow: hidden、text-overflow: ellipsis の3点セットを使用します。
複数行の省略には -webkit-line-clamp を活用し、行数を制御するのが現在のベストプラクティスです。
また、アクセシビリティを考慮し、title 属性などで全文を確認できる手段を提供することも忘れないようにしましょう。
最新のブラウザ仕様を理解し、適切なプロパティを選択することで、デバイスを問わず美しいレイアウトを保つことができます。
今回紹介した手法を駆使して、よりクリーンで使いやすいWebサイト制作を目指してください。