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

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

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

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

text-overflowを使う場合

css

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

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

line-clamp

css

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

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

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

trunk8

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

jQuery

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

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

最後に

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました