首页 > Web开发 > 详细

css+js限制文本长度

时间:2019-06-29 17:11:41      阅读:106      评论:0      收藏:0      [点我收藏+]

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时则支持点击切换

css+js限制文本长度

原文:https://www.cnblogs.com/mankii/p/11107079.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!