字符串截取【超过长度用...表示】

使用JQuery实现超过长度用"..."省略

效果图

相关代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>cookie</title>
6

<style>
8

*{ margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif;}
9

#best{ width:300px; height:200px; border:1px solid #ccc; margin:60px auto 0; line-height:1.6; font-size:14px; padding:10px 0 0 10px}
10

.blank{ font-size:18px; font-weight:bold; text-align:center; padding:20px}
11

</style>
12

jQuery.fn.limit=function(){
14

var self = $("div[limit]");
15

self.each(function(){
16

var objString = $(this).text();
17

var objLength = $(this).text().length;
18

var num = $(this).attr("limit");
19

if(objLength > num){
20

$(this).attr("title",objString);
21

objString = $(this).text(objString.substring(0,num) + "

");
22

}
23

})
24

}
25

$(function(){
26

$(document.body).limit();
27

})
28

</script>
29

</head>
30

<body>
31

<div class="blank">请按F5刷新页面。。。。</div>
32

<div id="best">
33

<div limit="12">计算字串的长度长度长度长度</div>
34

<div limit="10">这边有优化很公开这边</div>
35

<div limit="12">这边有优化很公开长度长度很公开长度</div>
36

<div limit="12">计算字长度长度</div>
37

<div limit="10">这边有优化很边有优化很边有优化很边有优化很边有优化很</div>
38

</div>
39

</body>
40

</html>

posted on 2011-07-04 13:00 何智阅读(460) 评论(0) 编辑收藏所属分类: UI

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

字符串截取【超过长度用...表示】

导航

统计

留言簿(1)

文章分类

文章档案

搜索

最新评论