jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BlackFlag

jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BlackFlag



CSS側ではページロードの際に
一瞬長い文字列が表示されてしまわぬよう
カットさせる要素はあらかじめ非表示の状態にしておきます。



◆CSS

ul li {

visibility: hidden;

}

◆SCRIPT

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>

$(function(){

var $setElm = $('ul li');

var cutFigure = '30'; // カットする文字数

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'});

}

});

});

</script>