JQuery限制文本显示长度,多余部分显示省略号...-优快云博客

本文展示了如何使用jQuery实现一个简单的文本截断插件，该插件能够限制显示的字符数量，并在超出限制时添加省略号。通过设置不同元素的限制长度，可以观察到文本被截断的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.ifeisu.com</title>
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.limit=function(){
    var self = $("p[limit]");
    self.each(function(){
        var objString = jQuery.trim($(this).text());
        var objLength = objString.length;
        var num = $(this).attr("limit");
        if(objLength > num){
$(this).attr("title",objString);
            objString = $(this).text(objString.substring(0,num) + "...");
        }
    })
}
$(function(){
    $(document.body).limit();
})
</script>
</head>
<body>
    <p limit="12">                                       
	www.ifeisu.comwww.ifeisu.comwww.ifeisu.comwww.ifeisu.com</p>
    <p limit="10">                               
	www.ifeisu.comwww.ifeisu.comwww.ifeisu.comwww.ifeisu.com</p>
    <p limit="12">                                 
	www.ifeisu.com</p>
    <p limit="12">                               
	www.ifeisu.com</p>
    <p limit="10">                                    
	www.ifeisu.comwww.ifeisu.comwww.ifeisu.comwww.ifeisu.com</p>
</body>
</html>