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中关于break,continue的特殊用法与介绍
May 24 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
vue如何进行动画的封装
Sep 26 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
JS数据类型分类及常用判断方法
Nov 19 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.MVC的模板标签系统(二)
2006/09/05 PHP
PHP学习之PHP表达式
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php常见的魔术方法详解
2014/12/25 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
Python安装第三方库的3种方法
2015/06/21 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
pandas中ix的使用详细讲解
2020/03/09 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
学期自我评价
2014/01/27 职场文书
中学生自我评价范文
2014/02/08 职场文书
法定代表人证明书
2014/11/28 职场文书
个人先进材料范文
2014/12/30 职场文书
社区元宵节活动总结
2015/02/06 职场文书
爱心捐书倡议书
2015/04/27 职场文书
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS