JQuery 控制内容长度超出规定长度显示省略号
更新时间：2014年05月23日 14:58:30 作者：
这篇文章主要介绍JQuery如何实现控制内容长度超出规定长度显示省略号,需要的朋友可以参考下
长度超出规定长度，显示省略号
设置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>
设置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>
相关文章
jquery从1.3开始，使用了新的选择器–sizzle。效率超过了以前的jquery版本的其他选择器。下面这篇文章主要介绍了jQuery源中sizzle选择器的相关资料，文中介绍的很详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
这篇文章分享了一份jquery动画效果学习笔记，针对jquery动画效果进行细致解析，对淡入淡出效果、滑动效果进行原理讲解，想要学好jquery动画效果，就耐心阅读本文，相信大家会有意想不到的收获。2015-11-11
这篇文章主要介绍了原生js获取浏览器和对象宽高与jquery获取浏览器和对象宽高的方法关系对比,十分实用，需要的朋友可以参考下2015-04-04
这篇文章主要介绍了jQuery实现可兼容IE6的遮罩功能,详细分析了jQuery遮罩层的布局、样式及功能实现技巧,需要的朋友可以参考下2017-09-09
本文给大家介绍如何给Carousel插件添加新的功能，非常方便以后的程序开发，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-04-04
animate弹出后，调用out函数消失。2010-05-05
内部链接是通过在a标签内将href属性值设为#+id的形式，外链则是在a中增加rel属性，并将属性值设为external,感兴趣的朋友可以了解下哦2013-01-01
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
这篇文章主要介绍了Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击。需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
下面小编就为大家带来一篇浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果，带索引按钮控制和左右按钮控制图片切换，实例代码如下，感兴趣的朋友可以参考下哈2013-06-06
最新评论