用jquery控制span显示几个字符

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hyql/p/5344897.html

文章标签：

#javascript #ViewUI

本文介绍了一个用于前端开发的文字自动截断插件，该插件可根据元素的CSS宽度自动调整显示的文字数量，并通过JavaScript实现文字内容的智能裁剪及省略号添加，适用于各种动态布局。

<script src="js/wordLimit.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
word();
}); 
function word(){
$(".table").wordLimit(8);
}
</script>
<body>
<span class="table">测试就将计就计啦啦啦经济</span>
</body>

　　调用WordLimit.js如下：

/* $(".test1").wordLimit(); 自动获取css宽度进行处理，如果css中未对.test1给定宽度，则不起作用 
    $(".test2").wordLimit(24); 截取字符数，值为大于0的整数，这里表示class为test2的标签内字符数最多24个 
*/  
  
(function($){  
    $.fn.wordLimit = function(num){   
        this.each(function(){     
            if(!num){  
                var copyThis = $(this.cloneNode(true)).hide().css({  
                    'position': 'absolute',  
                    'width': 'auto',  
                    'overflow': 'visible'  
                });   
                $(this).after(copyThis);  
                if(copyThis.width()>$(this).width()){  
                    $(this).text($(this).text().substring(0,$(this).text().length-4));  
                    $(this).html($(this).html()+'...');  
                    copyThis.remove();  
                    $(this).wordLimit();  
                }else{  
                    copyThis.remove(); //清除复制  
                    return;  
                }     
            }else{  
                var maxwidth=num;  
                if($(this).text().length>maxwidth){  
                    $(this).text($(this).text().substring(0,maxwidth));  
                    $(this).html($(this).html()+'...');  
                }  
            }                      
        });  
    }           
})(jQuery);

转载于:https://www.cnblogs.com/hyql/p/5344897.html