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

javascript
この記事は約2分で読めます。
スポンサーリンク

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

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>
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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