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 Easyui Tree的oncheck事件实现代码
May 28 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
jQuery 选择器理解
2010/03/16 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Python遍历numpy数组的实例
2018/04/04 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python 有效的括号的实现代码示例
2019/11/11 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
社区学习十八大感想
2014/01/22 职场文书
计算机专业求职信
2014/06/02 职场文书
单位活动策划方案
2014/08/17 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
青年志愿者活动感想
2015/08/07 职场文书