テキスト領域からはみ出すときに、末尾省略符号（三点リーダー...）で残りを表示させない方法

末尾省略記号の表示のさせ方

今回の記事では、領域が足りないときに三点リーダーで表示する方法をご紹介します。

テキストが領域からはみ出すときに、「...」と表示させて残りを表示させていないWebページをよく見かけますよね。あれです。画像で見るとこんな感じになります。

私はこの表示方法の仕方を覚えては忘れてを繰り返していました。何度同じこと調べるんだと自分でも思ったので記事にしました。これで私自身の調べる手間も省けます。それでは実際の手順を記載していきます。

手順

１．HTMLで次のように記載

<div class="three-point-test">
三点リーダーのテストをしています。これで指定した横幅以上になれば...で表示されるはずです。この書き方は複数行では対応していません。
</div>

２．cssで次のように記載

.three-point-test {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

以上です。これで、指定した横幅以上の文字は省略されて「...」で表示されます。それでは仕組みを詳しく見ていきましょう。

仕組み

実際に三点リーダーを設定しているのは「text-overflow」です。

text-overflow: ellipsis;

この「text-overflow」を機能させるに、次の３つの設定をする必要があります。

１．横幅の指定

width: 300px;

横幅を指定します。

２．はみ出た部分を表示しない

overflow: hidden;

ボックスの範囲内に内容が入りきらない場合に、はみ出た部分は表示しない。

３．改行禁止

white-space: nowrap;

改行を禁止します。

あまり使わないので忘れがちですが、忘れたときにはまたこのページを見ると良いかと。