三点リーダーについて-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 行でない場合、途端に難易度が跳ね上がるので、結構しんどい