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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
axios基本入门用法教程
2017/03/25 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python通过命令开启http.server服务器的方法
2017/11/04 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
中国梦读书活动总结
2014/07/10 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
js实现模拟购物商城案例
2021/05/18 Javascript
python pygame入门教程
2021/06/01 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
手写实现JS中的new
2021/11/07 Javascript
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers