読者です 読者をやめる 読者になる 読者になる

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

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

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


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


f:id:somegoro:20160708044151p:plain


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

手順

1.HTMLで次のように記載

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


2.cssで次のように記載

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


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

仕組み

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

text-overflow: ellipsis;

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

1.横幅の指定

width: 300px;

横幅を指定します。

2.はみ出た部分を表示しない

overflow: hidden;

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

3.改行禁止

white-space: nowrap;

改行を禁止します。



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


もしくはポケットにリファレンスを忍ばせておく。

HTML5&CSS3ポケットリファレンス

HTML5&CSS3ポケットリファレンス