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之focus函数使用介绍
Aug 20 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
理解javascript中DOM事件
Dec 25 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
再论Javascript的类继承
2011/03/05 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
python实现连接mongodb的方法
2015/05/08 Python
详解Python装饰器由浅入深
2016/12/09 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python处理PDF与CDF实例
2020/02/26 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
What is EJB
2016/07/22 面试题
课堂教学改革实施方案
2014/03/17 职场文书
年终工作总结范文2014
2014/11/27 职场文书
给老婆的检讨书
2015/01/27 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers