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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
JavaScript函数、方法、对象代码
Oct 29 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
多种方式实现js图片预览
Dec 12 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
实例分析js事件循环机制
Dec 13 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php遍历数组的方法分享
2012/03/22 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
Anaconda入门使用总结
2018/04/05 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
用python写PDF转换器的实现
2020/10/29 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
租房协议书范文
2014/08/20 职场文书
学习退步检讨书
2014/09/28 职场文书
先进班集体事迹材料
2014/12/25 职场文书
领导欢迎词范文
2015/01/26 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
新闻通讯稿模板
2015/07/22 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
2016年记者节感言
2015/12/08 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python