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中Math对象方法使用概述
Jan 02 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
jquery css实现流程进度条
Mar 26 jQuery
Element中Slider滑块的具体使用
Jul 29 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php源码的安装方法和实例
2019/09/26 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
python指定写入文件时的编码格式方法
2018/06/07 Python
python list格式数据excel导出方法
2018/10/31 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python中内建模块collections如何使用
2020/05/27 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
计算机专业自荐信
2013/10/14 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
离婚协议书怎么写
2014/09/12 职场文书
法人委托书范本
2014/09/15 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS