【jQuery】長い文字列を省略し「…」にする

■ポイント
・テキストの文字列を取得する。
・表示する文字数をブレイクポイントに、if構文で文字を省略し「…」を追加するか、そのまま表示するかに分ける

■jQ

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
    var $setElm = $('#demo .text'); // 省略する文字のあるセレクタを取得
    var cutFigure = '10'; // 表示する文字数
    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'});    // そのまま表示
        }
    });
});
</scritpt>

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です