【trunk8】行数で文字をカットして3点リーダーを表示させる

文字が長くなる場合に何行以上になったら文字をカットして3点リーダーを表示させたいときってあると思います。

方法はいくつかあります。

cssでやる方法とjQueryのプラグインを使う方法など。

今回は、「text-overflow」と「line-clamp」を使用する方法とjQuery「txt-trunk8」を使用する方法を紹介していきたいと思います。

行数で文字をカットして3点リーダーを表示させる方法

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

1行以上のときにカットしたい場合には「txt-overflow」が使用できます。複数行は指定できません。

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

2行以上で三点リーダーを表示させたいときはline-clampを使用できます。

cssで対応できるのは良いですが1つ欠点としてはサポートしていないブラウザがある点です。

trunk8で必要なファイルを下記からダウンロードしましょう。

jQuery(function() {
        jQuery('.txt-trunk8').trunk8({
         lines: 2,   //行数
         fill: '...'
        });
});

オプションとしてlinesに行数を指定してfillにカットしたところに入れるテキストを設定します。

複数行のときにcssのみで三点リーダーを対応できたら簡単で良いですがサポートしていないブラウザがあるために使いづらいかもしれません。

そんなときはtrunk8を使用したほうがよいと思います。