さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】文字数制限(指定した文字数を超えると「…」を表示)

Pocket
LINEで送る

指定した文字数を超えると「…」を表示してテキストを省略するjsをプラグイン化しました。

スクリプトコードの読み込み

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/character_limit.js"></script>
<script>
$(function() {
    $('p').characterLimit({
        cutFigure: '20' // 表示する文字数
    });
});
</script>

html


<p>ああああああああああいいいいいいいいいいううううううううううええええええええええ</p>

javascript(character_limit.js)

;(function($) {
	
	$.fn.characterLimit = function(options){
		var opts = $.extend({}, $.fn.characterLimit.defaults, options);
		var afterTxt = '...'; // 文字カット後に表示するテキスト

		$(this).each(function(){
			var textLength = $(this).text().length;
			var textTrim = $(this).text().substr(0,(opts.cutFigure));

			if(opts.cutFigure < textLength) {
				$(this).html(textTrim + afterTxt).css({visibility:'visible'});
			} else if(opts.cutFigure >= textLength) {
				$(this).css({visibility:'visible'});
			}
		});
	};
	
	$.fn.characterLimit.defaults = {
		cutFigure: '30' // デフォルトの指定
	};
})(jQuery);

カテゴリー:基本, JQuery

コメントを残す

コメント内容