用jquery 实现超出字符截断加上省略号并且可以提示全部内容

最新推荐文章于 2021-07-24 10:20:47 发布

diqigou2000

最新推荐文章于 2021-07-24 10:20:47 发布

阅读量135

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/alone2015/articles/4603760.html

版权


<!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

转载于:https://www.cnblogs.com/alone2015/articles/4603760.html

diqigou2000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用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>...
复制链接

扫一扫