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 获取链接(url)参数的方法
Feb 15 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
原生js实现3D轮播图
Mar 21 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
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
django用户登录和注销的实现方法
2018/07/16 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
JAVA和C++区别都有哪些
2015/03/30 面试题
总经理驾驶员岗位职责
2013/12/04 职场文书
工地安全质量标语
2014/06/07 职场文书
学校运动会霸气口号
2014/06/07 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
中国世界遗产导游词
2015/02/13 职场文书
写给老师的保证书
2015/05/09 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
JAVA springCloud项目搭建流程
2022/05/11 Java/Android