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 相关文章推荐
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
python实现自动更换ip的方法
2015/05/05 Python
python实现决策树分类
2018/08/30 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
初中地理教学反思
2014/01/11 职场文书
前台文员我鉴定
2014/01/12 职场文书
安全施工标语
2014/06/07 职场文书
大学专科自荐信
2014/06/17 职场文书
领导班子四风表现材料
2014/08/23 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
写给老师的保证书
2015/05/09 职场文书
匿名信格式范文
2015/05/27 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
Go语言grpc和protobuf
2022/04/13 Golang