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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
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
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JS中操作JSON总结
2020/12/06 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript实现动态标签云
2015/10/16 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
如何利用python查找电脑文件
2018/04/27 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
学习型班组申报材料
2014/05/31 职场文书
国庆宣传标语
2014/06/30 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
关于分班的感言
2015/08/04 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
团干部培训班心得体会
2016/01/06 职场文书
《确定位置》教学反思
2016/02/18 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python