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里的正则表达式说明
Aug 03 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jquery datatable服务端分页
Aug 31 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
Javascript中的解构赋值语法详解
Apr 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
PHP基础知识介绍
2013/09/17 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue实现文件上传功能
2018/08/13 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python实现按长宽比缩放图片
2018/06/07 Python
python调用摄像头显示图像的实例
2018/08/03 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Pygame框架实现飞机大战
2020/08/07 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
Internal修饰符有什么含义
2013/07/10 面试题
网站编辑求职信
2013/10/17 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
食品采购员岗位职责
2014/04/14 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
医院员工辞职信范文
2015/05/12 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python