本篇教程介绍了jQuery如何实现文字截断，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

 在数据库获取一些新闻时，有时文字过多，为了不破坏布局，常常需要只显示一部分，这是需要用到文字截断的功能。虽然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是要显示的文字个数，即可。

   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！