jq文字截断

在数据库获取一些新闻时，有时文字过多，为了不破坏布局，常常需要只显示一部分，这是需要用到文字截断的功能。虽然css也可以实现，但是限制太多

css实现需要text-overflow:ellipsis;overflow:hidden;white-space:nowrap;三个属性，另外还需要文本标签宽度，这几个缺一不可。用jq控制就轻松许多。

HTML：

<div limit="10">
    我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话我是一段话
</div>

jq：

jQuery.fn.limit=function(){  
        var self = $("[limit]");  
        self.each(function(){  
            var objString = $(this).text();  
            var objLength = $(this).text().length;  
            var num = $(this).attr("limit");  
            if(objLength > num){  
                $(this).attr("title",objString);  
                objString = $(this).text(objString.substring(0,num) + "...");  
            }  
        })  
    }  
    $(function(){  
        $("[limit]").limit();  
    })  

用jq实现文字截断只需引入jq和这段代码，然后在需要截断元素标签上加上limit="XX"，XX是要显示的文字个数，即可。

转载于:https://www.cnblogs.com/xuxingeren/p/5868959.html