先生と生徒の会話形式で理解しよう

生徒

「先生、Webページで長い文章が『…』みたいに途中で切れてるのを見たことあるんですけど、どうやってやるんですか？」

先生

「それはCSSのellipsis（エリプシス）という機能を使って、省略記号を表示しているんです。」

生徒

「エリプシスって言うんですね！英語が難しそう…。初心者でも使える方法を教えてもらえますか？」

先生

「もちろんです。パソコンが初めての方でもわかるように、順番に丁寧に解説しますね。」

1. CSSのellipsis（エリプシス）とは？

ellipsis（エリプシス）とは、「…（てんてんてん）」のことです。文章が長くて表示スペースに入りきらないとき、自動で途中を切って『…』にしてくれるCSSのテクニックです。

たとえば、ニュースのタイトルや、スマホ画面で文章をすべて表示すると読みにくい時などに使われます。

英語で「省略記号」という意味ですが、HTMLやCSSでは実際のプロパティ名がtext-overflow: ellipsis;という形になります。

2. 一行だけのテキストを省略して…をつける方法

まずは基本中の基本、「1行だけのテキスト」を途中で省略して省略記号（…）をつけるやり方です。次の3つの指定がセットで必要です。

white-space: nowrap;：文章を折り返さず1行にする
overflow: hidden;：はみ出した部分を非表示にする
text-overflow: ellipsis;：最後に「…」を表示する

では実際のサンプルコードを見てみましょう。


<style>
p.single-line {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
}
</style>

<p class="single-line">これはとてもとても長い文章です。省略されて表示されるはずです。</p>

ブラウザ表示

この例では、表示できる横幅が決まっていて、それよりも長い文章は省略されて「…」になります。

3. 複数行のテキストを省略して…をつける方法

実は、text-overflow: ellipsis;は本来1行だけに使えるもので、複数行に直接使うことはできません。ですが、-webkit-line-clamp（ウェブキット・ライン・クランプ）という特殊なプロパティを使うことで、2行目や3行目で切って「…」をつけることができます。

これはスマートフォンのアプリやレスポンシブなレイアウトでもよく使われる重要なテクニックです。

次のように書きます。


<style>
p.multi-line {
    width: 300px;
    height: 3.6em;
    line-height: 1.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
</style>

<p class="multi-line">
CSSを使えば複数行の文章を簡単に省略して「…」を表示することができます。このテクニックを覚えると、スマホでも見やすい文章が作れます。
</p>

ブラウザ表示

このコードでは、3行目まで表示して、それ以降の文字は非表示にし「…」が付きます。数字を変えれば、2行でも4行でも調整できます。

4. よく使う場面とデザインのポイント

複数行のテキスト省略は、以下のような場面で特に役立ちます。

記事一覧のタイトルや要約
スマホ画面のカードレイアウト
レビューコメントの表示枠

ユーザーに「続きを読みたい」と思わせるためにも、「…」でうまく切るのは大切なデザイン技術です。

ポイント：文章が切れる位置にも注意しましょう。言葉の途中で切れると不自然になることもあるので、適度な行数で調整するのがコツです。

5. スマホ・パソコンでも見やすいテキストの省略デザイン

最近ではスマートフォンやタブレットでもWebページを見る人が多くなっています。そのため、省略表示を使って画面サイズに合わせた読みやすいレイアウトを作ることがとても重要です。

例えば、ニュースアプリのようにタイトル・本文をカードで並べるときも、「3行までで切って…」とすることで、すっきりとしたデザインにできます。

6. 初心者でも安心！コピペで使えるCSS省略テクニック

パソコンが苦手な方もご安心ください。以下のコードをコピーして、自分のHTMLに貼り付けるだけで、すぐに「…」を表示できます。

数字を変えて行数を調整したり、幅を変えたりして、いろいろ試してみましょう。


<style>
.text-ellipsis {
    width: 280px;
    height: 3.6em;
    line-height: 1.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
</style>

<div class="text-ellipsis">
これは省略のテストです。とても長い文章でも、ここで指定した行数までしか表示されず、それ以降は見えなくなって…がつきます。
</div>

ブラウザ表示

この方法なら、プログラミング未経験でもCSSの省略機能をすぐに体験できます。