用jquery实现超出字符截断加上省略号并且可以提示全部内容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代码：
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();
})
效果：
limit是属性名
120是字符串字数
随你们修改自己测一下。
还有不要忘了<script src="js/jquery-1.8.3.min.js"></script>
这个jq插件必须用。 我用的是1.8.3
上一篇：Jquery获取父元素
下一篇：jQuery异步加载分页代码
我要评论