【jQuery】〇文字以上「…」をコピペで簡単設置！

ブログでよくある本文の省略機能だけど、自分で作ると結構手間だよね。
何かサービス作る時とかよく使うから、このページを覚えとくと便利！
じゃ～まずデモだよ。

15文字以上はカットしてその後点々デモ

15文字以降は点々で切るからそれ以上は書かなくてもいいんだけど

これで15文字以上カットできたね！
半角も全角も1文字として計算するから分かりやすい！
このコードは以下の通り！

jQuery

var $setElm = $('.demo');// 対象となるID・クラス
var cutFigure = '15';// カットしたい文字数
var afterTxt = '…';// カット後の文字

$setElm.each(function(){
  var textLength = $(this).text().length;
  var textTrim = $(this).text().substr(0,(cutFigure));
  if(cutFigure < textLength) {
    $(this).html(textTrim + afterTxt).css({visibility:'visible'});
  } else if(cutFigure >= textLength) {
    $(this).css({visibility:'visible'});
  }
});

「var textTrim」で指定数分の文字から後ろをカットして、そこから下は指定文字数以上だったら「…」をつけてそれ以外は何もしないって処理だね！
一応…HTMLも（要らない気がする…）

HTML

<div class="demo">15文字以降は点々で切るからそれ以上は書かなくてもいいんだけど</div>