Tweet

Pocket

指定した文字数を超えると「…」を表示してテキストを省略する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);