JQuery 控制内容长度超出规定长度显示省略号


Posted in Javascript onMay 23, 2014

长度超出规定长度,显示省略号

设置class为displayPart,

设置自定义属,displayLength可显示长度(不包含...),双字节字符,长度 *2,

<script type="text/javascript"> 
$.fn.extend({ 
displayPart:function () { 
var displayLength = 100; 
displayLength = this.attr("displayLength") || displayLength; 
var text = this.text(); 
if (!text) return ""; var result = ""; 
var count = 0; 
for (var i = 0; i < displayLength; i++) { 
var _char = text.charAt(i); 
if (count >= displayLength) break; 
if (/[^x00-xff]/.test(_char)) count++; //双字节字符,//[u4e00-u9fa5]中文 
result += _char; 
count++; 
} 
if (result.length < text.length) { 
result += "..."; 
} 
this.text(result); 
} 
}); 
$(function () { 
$(".displayPart").displayPart(); 
}); 
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
</head> <body> 
<h2>hello world</h2> 
<div style="width:500px;"> 
hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world!!! 
</div> 
<hr> 
<h2>hello</h2> 
<div class="displayPart" displayLength="40"> hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhelloworldhello worldhello worldhello worldhello worldhello worldhello world 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
Angular的$http与$location
Dec 26 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
jquery重复提交请求的原因浅析
May 23 #Javascript
jquery仿搜索自动联想功能代码
May 23 #Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 #Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 #Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 #Javascript
jquery 中的each()跳出循环的语句
May 23 #Javascript
Jquery给基本控件的取值、赋值示例
May 23 #Javascript
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
js replace替换所有匹配的字符串
2014/02/13 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
php使用递归与迭代实现快速排序示例
2014/01/23 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
浅析Python数据处理
2018/05/02 Python
Python for循环生成列表的实例
2018/06/15 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python Pexpect模块的使用
2020/12/25 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
公开承诺书格式
2014/05/21 职场文书
金融保险专业求职信
2014/09/03 职场文书
婚礼家长致辞
2015/07/27 职场文书
初中班主任心得体会
2016/01/07 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
2019各种承诺书范文
2019/06/24 职场文书
导游词之长城八达岭
2019/09/24 职场文书