用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容
<!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=gb2312" /> <title>无标题文档</title> <script src="js/jquery-1.8.3.min.js"></script> <script src="fature.js"></script> </head> <script> $('p').tooltip(); </script> <body> <p limit="120">蔬菜是人们饮食中不可缺少的重要组成部分，特别是某些具有防癌、抗癌作用的蔬菜已经成为追求健康养生人士的宠儿。对此，北京瑶医医院权威肿瘤专家谷翠娥主任说，蔬菜营养丰富，含有人体必须的维生素、矿物质、碳水化合物、蛋白质等，是人体所需维生素和矿物质的主要来源。那么，哪些蔬菜具有防癌功能呢?桐君医院的专家们为我们介绍如下：</p> <p limit="120">蔬菜是人们饮食中不可缺少的重要组成部分，特别是某些具有防癌、抗癌作用的蔬菜已经成为追求健康养生人士的宠儿。对此，北京瑶医医院权威肿瘤专家谷翠娥主任说，蔬菜营养丰富，含有人体必须的维生素、矿物质、碳水化合物、蛋白质等，是人体所需维生素和矿物质的主要来源。那么，哪些蔬菜具有防癌功能呢?桐君医院的专家们为我们介绍如下：</p> <p limit="120">蔬菜是人们饮食中不可缺少的重要组成部分，特别是某些具有防癌、抗癌作用的蔬菜已经成为追求健康养生人士的宠儿。对此，北京瑶医医院权威肿瘤专家谷翠娥主任说，蔬菜营养丰富，含有人体必须的维生素、矿物质、碳水化合物、蛋白质等，是人体所需维生素和矿物质的主要来源。那么，哪些蔬菜具有防癌功能呢?桐君医院的专家们为我们介绍如下：</p> <p limit="120">蔬菜是人们饮食中不可缺少的重要组成部分，特别是某些具有防癌、抗癌作用的蔬菜已经成为追求健康养生人士的宠儿。对此，北京瑶医医院权威肿瘤专家谷翠娥主任说，蔬菜营养丰富，含有人体必须的维生素、矿物质、碳水化合物、蛋白质等，是人体所需维生素和矿物质的主要来源。那么，哪些蔬菜具有防癌功能呢?桐君医院的专家们为我们介绍如下：</p> </body> </html>
JS部分
1 jQuery.fn.limit=function(){ 2 var self = $("[limit]"); 3 self.each(function(){ 4 var objString = $(this).text(); 5 var objLength = $(this).text().length; 6 var num = $(this).attr("limit"); 7 if(objLength > num){ 8 $(this).attr("title",objString); 9 objString = $(this).text(objString.substring(0,num) + "..."); 10 } 11 }) 12 } 13 $(function(){ 14 $("[limit]").limit(); 15 })
limit是属性名
120是字符串字数
随你们修改自己测一下。
还有不要忘了<script src="js/jquery-1.8.3.min.js"></script>
这个jq插件必须用。 我用的是1.8.3
