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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
分析JS单线程异步io回调的特性
Dec 01 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
CocosCreator入门教程之网络通信
Apr 16 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设计模式之结构模式的深入解析
2013/06/13 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
javascript事件问题
2009/09/05 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
沂蒙六姐妹观后感
2015/06/08 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript