CSSで複数行の文末を三点リーダーで省略表示する方法【CSS】

最終更新日：2024-11-01

公開日：2024-10-28

ページ内に広告が含まれています。

WordPressなどの動的な出力部分を文字数で制限する事があります。
最近はパソコンやタブレットやスマホなど様々なデバイスがあり、横幅もそれぞれ違います。それを文字数で制限しても、媒体によっては1文字や2文字だけカラム落ちしてしまうなどの見栄えに関する不具合が生じます。

今回は、CSSを使って横幅で制限出来るため、どの媒体でもカラム落ちせず表示出来る方法を解説していきます。

三点リーダーで文末を省略表示する方法について
1行テキストの場合
複数行テキストの場合
さいごに

三点リーダーで文末を省略表示する方法について

最初に、三点リーダーで文末を省略表示する方法についてですが、2パターンあります。
それは、1行テキストの場合と複数行テキストの場合です。

この2つのパターンで省略表示する方法が違ってきますので、しっかりと覚えて用途に合わせて使用してみてください。

1行テキストの場合

まずは、1行テキストの場合の省略表示の方法です。
実際のコードは以下をご覧ください。

<p>サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</p>

p {
    width:100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。

上記のコードのように、横幅を決め、改行禁止にしてはみ出た部分を非表示にし三点リーダーを表示する、といった内容になります。詳しくは以下のようになります。

text-overflow: ellipsis;

今回の三点リーダーで省略表示するのみ一番必要なプロパティです。
text-overflowプロパティは、要素からはみ出した部分をどのように表示するか指定するプロパティとなります。
指定出来る値は以下の通りです。

ellipsis
指定する事で三点リーダーでの省略表示になります。
clip
指定する事で省略表示の記号はなく、そのままテキストが切れます。

その他に、省略表示の記号やテキストが自由に指定できる値もありましたが、今はほとんどのブラウザでサポートされていないようです。

white-space: nowrap;

テキストの改行を禁止します。
この指定が無いと通常通り改行され、省略表示されません。

overflow: hidden;

ブロックからはみ出した部分を非表示にします。
この指定が無いとはみ出した部分も表示され、省略表示にはなりません。

以上の3つのプロパティを使用して、1行テキストの省略表示が可能になります。
省略したい内容は囲うブロックの横幅を調整してあげてください。

複数行テキストの場合

続いて、複数行テキストの省略補油時の方法ですが、先ほどの方法ではwhite-space: nowrap;で改行禁止になってしまう為複数行には対応できません。
ですので、複数行テキストでは先ほどとは違ういくつかのプロパティを使用していきます。
まずは以下のコードをご覧ください。

<p>サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</p>

p {
    width:100%;
    max-width: 300px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

上記のコードのように、1行テキストの省略表示とは違うプロパティを使用していきます。
詳しくは以下をご覧ください。

text-overflow: ellipsis;

1行テキストと同じく、text-overflowプロパティは要素からはみ出した部分をどのように表示するか指定するプロパティとなります。
指定出来る値は1行テキストの省略表示の項目をご覧ください。

display: -webkit-box;

-webkit-boxとは、flexのベンダープレフィックスのようです。
他の-webkit-box-orientや-webkit-line-clampを使用する為にflexでは無く-webkit-boxを使用します。
-webkit-とベンダープレフィックスがついていますが、付いている事で全てブラウザに対応できる仕様になっているようです。

-webkit-box-orient: vertical;

要素がその中身をレイアウトする方向が水平か垂直かを指定する事ができます。
-webkit-とベンダープレフィックスがついていますが、付いている事で全てブラウザに対応できる仕様になっているようです。

-webkit-line-clamp: 3;

行数の制限をかける事が出来るプロパティです。
上記のdisplay: -webkit-box;(または-webkit-inline-box)と-webkit-box-orient: vertical;が設定されている時のみ使用できます。
-webkit-とベンダープレフィックスがついていますが、付いている事で全てブラウザに対応できる仕様になっているようです。