jQueryで文字数カット

仕事でよく使用するので覚書
jQueryで文字数を制限。思ったよりもよく使うので記載。

HTMLの記述

ダダうちの文言を記載した。HTMLです。

<ul>
<li>このテキストは文字数カットです。このテキストは文字数カットです。このテキストは文字数カットです。このテキストは文字数カットです。このテキストは文字数カットです。このテキストは文字数カットです。このテキストは文字数カットです。</li>
<li>これは文字数カットのテキストです。これは文字数カットのテキストです。これは文字数カットのテキストです。これは文字数カットのテキストです。</li>
<li>このテキストは文字数カットです。</li>
</ul>

cssの記述

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

ul li {
    visibility: hidden;
}

スポンサーリンク

javascriptの記述

カットの文字数は20で設定をしました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(function(){
    var $setElm = $('ul li');
    var cutFigure = '20'; // カットする文字数
    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>

レイアウトの表示などを考えるとこの技法はかなり使えるので記載しました。

スポンサーリンク

Originally posted 2015-11-26 11:31:11.