css+js限制文本长度

1、【最简单的文本长度限制】超出部分直接裁切，并在后面加上【...】

效果：

代码：（需要先引入jquery.js）

<div letter-limit="30" data-click="true">离离原上草，一岁一枯荣。风吹草低见牛羊。床前明月光，疑是地上霜。举头望明月，低头思故乡。</div>

    $('[letter-limit]').each(function(){
        var that = $(this);
        var limitNum = parseInt($(this).attr("letter-limit"));
        var olds = $.trim($(this).text());
        if(limitNum && olds.length > limitNum){
            $(this).text(olds.substring(0, limitNum)+"...");
        }
    });

2、支持点击切换的两种文本限制组件

$('[data-plugin="letter-limit"]').each(function(){
    var that = $(this);
    var limit = that.attr("data-limit");
    switch(limit){
        case "css":
            that.css({
                'overflow': 'hidden',
                'white-space': 'nowrap',
                'text-overflow': 'ellipsis'
            });
            that.attr("data-state", "0");
            if(that.attr("data-click") == "true"){
                that.on('click', function(){
                    if(that.attr("data-state") == "0"){
                        that.css({
                            'overflow': 'visible',
                            'white-space': 'normal',
                            'text-overflow': 'normal'
                        });
                        that.attr("data-state", "1");
                    }else{
                        that.css({
                            'overflow': 'hidden',
                            'white-space': 'nowrap',
                            'text-overflow': 'ellipsis'
                        });
                        that.attr("data-state", "0");
                    }
                });
            }
            break;
        default:
            var limitNum = parseInt(limit);
            if(!limitNum){ console.log('limit不合法：'+limit); return false;}
            var olds = that.text();
            olds = $.trim(olds);
            var news = olds.substring(0, limitNum)+"...";
            if(olds.length > limitNum){
                that.text(news);
                that.attr("data-news", news);
                that.attr("data-olds", olds);
                that.attr("data-state", "0");
            }
            if(that.attr("data-click") == "true"){
                that.on('click', function(){
                    if(olds.length > limitNum){
                        if(that.attr("data-state") == "0"){
                            that.text(that.attr("data-olds"));
                            that.attr("data-state", "1");
                        }else{
                            that.text(that.attr("data-news"));
                            that.attr("data-state", "0");
                        }
                    }
                });
            }
            break;
    }
});

使用1：【单行溢出隐藏/自动换行】

<div data-plugin="letter-limit" data-limit="css" data-click="true">离离原上草，一岁一枯荣。风吹草低见牛羊。床前明月光，疑是地上霜。举头望明月，低头思故乡。</div>

效果2：【js裁切文本】

<div data-plugin="letter-limit" data-limit="30" data-click="true">离离原上草，一岁一枯荣。风吹草低见牛羊。床前明月光，疑是地上霜。举头望明月，低头思故乡。</div>

其中，data-link为true时则支持点击切换