多行文本超出时显示省略号----jquery.ellipsis.js

在网页端编辑文本的时候,出于设计要求,有时会出现需要进行多行文本隐藏的要求。但是css的overflow:ellipsis;只能满足但行文本超出容器时的隐藏,这时候就要用到JS来进行操作,jquery.ellipsis.js是一个基于Jquery的多行文本长度限制插件(需要jQuery的版本在1.7.0之上)

jquery.ellipsis.js的使用非常简单,先在页面引入所需的JS文件:



初始化完成之后在JS文件中设定:

(1)控制单行文本时:

$('#id').ellipsis();

 
  

(2)控制多行文本时:(maxWidth控制文本宽度,maxLine控制行数)

$('#id').ellipsis({maxWidth:120,maxLine:2});
ps:使用过程中发现maxLine的控制行数不是很稳定,而且支持小数例如:
maxLine:2.5

这样会在大概两行半的位置进行内容裁剪,由于内容发生裁剪,所以建议大家在裁剪前可以手动给当前容器增加title属性来向用户展示完整内容,我是这样写的:

	$_bigbox.find(".des").eq(1).attr("title",$_bigbox.find(".des").eq(1).text());
	$(".des").ellipsis({maxWidth:120,maxLine:2.6});

效果如下:


你可能感兴趣的:(网页布局,常用插件及工具)