1、jQuery限制字符字数的方法
代码很简单,使用也很方便,如下:

$(document).ready(function(){
//限制字符个数
$(“.zxx_text_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
});
});

所产生的结果是:页面中class为“zxx_text_overflow”的标签内部字符的个数将最多显示23个,如果原本字符个数大于23,则会在后面添加点点点省略号(…)

jQuery限制字符个数实现溢出省略号表示

2、jQuery自动判断宽度是否超出的方法
相比较前面一种方法,这个js实现的方法更加智能些(也更占用资源),通过复制节点(就是需要判断是否文字溢出省略号显示的标签层),获取其宽度,再判断其宽度是否大于样式中给定的宽度限值,大于则去掉尾部字符,添加省略号,循环,直到复制的层的宽度小于css给定值。
js代码如下:

//by zhangxinxu
var wordLimit=function(){
$(“.zxx_text_overflow”).each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
‘position’: ‘absolute’,
‘width’: ‘auto’,
‘overflow’: ‘visible’
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+’…’);
copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}
});
}
wordLimit();

css部分需要给定一个宽度值,例如:.zxx_text_overflow{width:400px;}

jQuery宽度判定实现溢出省略号表示

狠狠地点击这里:本文各类方法的demo实例页面

最后补充:
我抽了一会儿时间把上面两个jQuery的方法结合起来,写了个小小的jQuery插件,方便对jQuery感兴趣的人直接使用了。
这个单行文字溢出用点点点省略号显示的jQuery插件的使用很简单。例如:

$(“.test1″).wordLimit(); 自动获取css宽度进行处理,如果css中未对.test1给定宽度,则不起作用
$(“.test2″).wordLimit(24); 截取字符数,值为大于0的整数,这里表示class为test2的标签内字符数最多24个

$.wordLimit();里面为空则根据宽度自动截取,有值的话就按照字符数进行截取了。

此插件js下载(右键,另存为)
源文件打包下载(zip 18.6K)

狠狠地点击这里:文字溢出省略号显示jQuery插件使用demo实例页面

 

jQuery关于文字内容溢出用点点点(…)省略号表示的更多相关文章

  1. jquery控制文字内容溢出用点点点(…)省略号表示

    jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text( ...

  2. 关于client浏览器界面文字内容溢出用省略号表示方法

    在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省 ...

  3. table表格中的内容溢出布局方式

    什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...

  4. 深入学习jQuery描述文本内容的3个方法

    × 目录 [1]html() [2]text() [3]val()[4]总结 前面的话 在javascript中,描述元素内容有5个属性,分别是innerHTML.outerHTML.innerTex ...

  5. 原生JS实现旋转轮播图+文字内容切换

    废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...

  6. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  7. C++ 与 php 的交互 之----- C++ 获取 网页文字内容,获取 php 的 echo 值。

    转载请声明出处! http://www.cnblogs.com/linguanh/category/633252.html 距离上次 谈 C++ 制作json 或者其他数据传送给 服务器,时隔两个多月 ...

  8. Jquery实现文字向上逐条滚动

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  9. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. UIView动画学习笔记

    UIView的动画是通过修改控件的属性来达到动画的效果,如:渐变, 移动. 废话不多说,直接上代码: - (void)loadView{ [super loadView]; _leftView = [ ...

  2. hdu 4301(基本dp)

    题意:就是给你一块2*n的巧克力,让你把它分成x块,并且每一个单位的巧克力各不相同,问有多少种分法? 分析:用dp[i][j][k],表示到巧克力的第二列时,巧克力被分成了j快,k用来表示第i列上下两 ...

  3. hibernate的组成部分

    持久化类 实现对应的序列化接口 必须有默认的构造函数 持久化类的属性不能使用关键字 标示符 映射文件 类型 java类型和hibernate类型 主键的产生器 increment identity a ...

  4. 把php.exe加入系统环境变量-使用命令行可快速执行PHP命令

    有时候在执行长时间运行的脚本程序的时候,浏览器是架不住的.我们就可以使用CMD命令行或者LINUX命令行执行PHP程序 1.把PHP.EXE加入到环境变量,不用每次都进入到PHP的目录 ①  右击我的 ...

  5. struct 与 typedef struct

    1. 基本解释 typedef为C语言的关键字,作用是为一种数据类型定义一个新名字.这里的数据类型包括内部数据类型(int,char等)和自定义的数据类型(struct等). 在编程中使用typede ...

  6. Selenium2Library系列 keywords 之 _SelectElementKeywords 之 select_all_from_list(self, locator)

    def select_all_from_list(self, locator): """Selects all values from multi-select list ...

  7. vector容器总结.xml

    1 清空所有元素     m_itemVector.clear();   2 遍历     vector<ITEM_CHECK>::iterator iter=m_itemVector.b ...

  8. Vs2015 win10虚拟机启动问题:无法设置UDP端口 解决方法 合集(转载)

    刚装的vs2015 社区版 出现这个问题,wp8.1和win10m模拟器都无法启动,找了好久找到的解决方案,放这儿供大家参考,免得大家像我一样走弯路: Windows Phone emulator n ...

  9. 软件工程个人项目-Word frequency program by11061167龚少波

    (一)工程设计时间预计 1.代码编写:4小时 熟悉Visual studio 2012的使用 : 程序代码部分主要分为三个步骤: (1)主函数的构建,包括各种函数调用及输入输出部分: (2)对目标文件 ...

  10. hadoop是什么?

    在如今这个信息高速发展的今天,hadoop也越来越火了,那么到底是什么原因让hadoop如此的火,接下来新霸哥将详细的为了介绍,并让你快速的任何hadoop是什么? hadoop思想起源:Google ...