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 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
JS解惑之Object中的key是有序的么
May 06 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
js实现微博发布小功能
2017/01/12 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python实现图片处理和特征提取详解
2017/11/13 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python 爬取疫情数据的源码
2020/02/09 Python
学python爬虫能做什么
2020/07/29 Python
python的launcher用法知识点总结
2020/08/07 Python
利用python 读写csv文件
2020/09/10 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
开工仪式主持词
2014/03/20 职场文书
积极向上的团队口号
2014/06/06 职场文书
债务追讨律师函
2015/06/24 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
实例详解Python的进程,线程和协程
2022/03/13 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis