相信我,天才无法与我媲美

用js方法限制文字个数,文字溢出省略号。自己写了一个限制容器文字长度的jQuery插件。​

2017-01-01

用js方法限制文字个数,文字溢出省略号。自己写了一个限制容器文字长度的jQuery插件。

自己写了一个限制容器文字长度的jQuery插件,用起来还是很方便的。

/**
 * $.txtCur();
 * @charset utf-8
 * @extends jquery.1.8.3
 * @example
 * $('.info').txtCur({n:50});
 * $('.info').txtCur({n:50,z:'...',isTitle:1});
 */
(function($) {
    $.fn.extend({
        txtCur: function(options) {
            //默认参数
            var defaults = {
                /**截取长度 */
                n: 60,
                /*结尾添加字符*/
                z: '...',
                /*是否在标签上 添加 title 属性*/
                isTitle: true

            }
            var options = $.extend(defaults, options);
            return this.each(function() {
                var o = options;
                var $this = $(this);
                var s = $this.text(),
                s = $.trim(s); //去掉收尾空格
                l = s.length,
                n = o.n; //设置字符长度为18个 
                if (l > n) {
                    //文本所有内容用a标签的title属性提示文本全部内容
                    if (o.isTitle) {
                        $(this).attr("title", s);
                    }
                    s = $this.text(s.substring(0, n) + o.z);
                }
                /**/

            });
        }
    });

})(jQuery);

//调用方法

<span txtCur="10">我是文字我是文字我是文字我是文字我是文字</span>
<script type="text/javascript">
$(function() {
    $('[txtCur]').each(function() {
        var $that = $(this);
        var maxNum = $that.attr('txtCur');
        $that.txtCur({
            n: maxNum
        });
    })
})
</script>

作者:lrxin | Categories:JQueryjQuery特效JS | Tags:

发表评论