jQueryで特定の文字数以降は「…」と省略させる方法

Pocket

長々とした文章がある時に表示の都合上何文字以上は省略させる処理を行いたい時がある。


<p class="cutText">ペンパイナポーアッポーペン</p>


$(function(){
	var $setElm = $('.cutText');
	var cutTxt = '7'; // 何文字まで表示させるか
	var addTxt = ' …'; // 文字の最後に表示させるテキスト

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

		if(cutTxt < textLength) {
			$(this).html(textTrim + addTxt).css({visibility:'visible'});
		} else if(cutTxt >= textLength) {
			$(this).css({visibility:'visible'});
		}
	});
});

するとこのような感じで表示されます。↓↓

ペンパイナポー…

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*