三点リーダーについて-CSSやJSを使った実装方法

三点リーダーについて-CSSやJSを使った実装方法
  • 「50文字以上で三点リーダー(・・・)にしたい」
  • 「3行目以降は三点リーダー(・・・)にしたい」
    などの要望があったときに、サクッと引っ張ってこれると便利なので、メモ

一行のみならCSSが一番簡単

一行のみで表示させるのであればtext-overflow: ellipsis;が使えるので、簡単

<p>三点リーダーめんどくさい三点リーダーめんどくさい三点リーダーめんどくさい</p>
p {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

複数行を実装する方法は2パターン

さまざまやり方はあるが、文字数で制限を欠ける

  • 文字数固定の場合
  • 文字数を取得し、オーバーした分を削除して後ろに「・・・」をつける
  • 行数固定の場合(3行目まで表示)
  • CSSで無理やり実装

文字数固定の場合(JS)

以下のような関数を用意してあげるといろんな場所で使えるので便利。

function textCut(selector, size) {
var afterTxt = '・・・';
selector.each(function () {
var textLength = $(this).text().length;
if (size < textLength) {
var textTrim = $(this)
.text()
.substr(0, size);
$(this).html(textTrim + afterTxt);
}
});
}

textCut($('p'), '30');

行数固定の場合(3行目まで表示)

複雑極まりないが、以下の方法で実装可能

// Variables
$container-bg: #eee;
$font-size-base: 14px;
$line-height-computed: 1.4;
$lines-to-show: 2;

p {
  margin: 0;
}

.container {
  background: #fff;
  overflow: hidden;
  width: 100%;
  p {
    font-size: $font-size-base;
    height: $font-size-base * $line-height-computed * $lines-to-show;
    line-height: $line-height-computed;
    position: relative;
    &:before,
    &:after {
      background: #fff;
      position: absolute;
    }
    &:before {
      content: '・・・';
      top: $font-size-base * $line-height-computed * ($lines-to-show - 1);
      right: 0;
    }
    &:after {
      content: '';
      height: 100%;
      width: 100%;
    }
  }
}

そもそもフロントでやるべきなのか問題

WordPressなどのCMSやAPIから情報を取得するのであれば取得した際のサーバー側で処理を行うほうが、
確実に処理速度が速いので、そもそもフロントで受け取った後やるべきではないかなと思われ。

1行でない場合、途端に難易度が跳ね上がるので、結構しんどい

ポートフォリオ・お問合せはこちら