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数学函数Exp使用说明
Aug 09 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
JavaScript满天星导航栏实现方法
Mar 08 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 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不用正则采集速度探究总结
2008/03/24 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Python中的多重装饰器
2015/04/11 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
为什么要做架构设计
2015/07/08 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
天猫活动策划方案
2014/08/21 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
监察建议书
2015/02/04 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
安全教育培训心得体会
2016/01/15 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python