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 相关文章推荐
JS 毫秒转时间示例代码
Sep 22 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
详解Vue单元测试case写法
May 24 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
Element Card 卡片的具体使用
Jul 26 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实现图片简单上传
2006/10/09 PHP
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python django集成cas验证系统
2014/07/14 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Django 批量插入数据的实现方法
2020/01/12 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
成教自我鉴定
2013/10/27 职场文书
业务总经理岗位职责
2014/02/03 职场文书
创业计划书模版
2014/02/05 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
法律意见书范本
2015/06/04 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
JavaScript的function函数详细介绍
2021/11/20 Javascript
SQLServer中exists和except用法介绍
2021/12/04 SQL Server