多行文本省略插件Ellipsis.js

原创 卓卓亭亭兮 教程 插件文档 167阅读 2018-01-15 10:50:32 举报

Ellipsis.js

网址:Github

演示:demo

安装:

只需要在页面中引入“Ellipsis.js”文件即可。如:

<script src="../lib/Ellipsis.js"></script>

使用方法:

首先你要实例化一个“Ellipsis”对象。例如:

[quote]var elli = new Ellipsis({
nativeClamp: false, //是否使用原生省略效果(boolean类型),默认为false
clamp: 'auto', //省略模式(string或number类型),默认为auto
omisSpace: 0, //省略符间隔(string或number类型),默认为0
omission: '', //省略符(string类型),默认为空
appendHTML: '', //追加的HTML(string类型),默认为空
});[/quote]

参数说明:

nativeClamp:是否使用原生省略效果(boolean类型),默认为false ;

clamp:省略模式(string或number类型),默认为auto ;

omisSpace:省略符间隔(string或number类型),默认为0 ;

omission:省略符(string类型),默认为空;

appendHTML:追加的HTML(string类型),默认为空;

实例化的“Ellipsis”对象拥有“clamp(el, obj)”方法:

el:需要省略的DOM元素

obj:该对象参数下的属性会覆盖实例化时的参数

例如:
[quote]
var mixText = "Hi!我的英文名是jofun。在2015年01月,我便开始投身于web开发这个行业中,到今天将近有3年的时间了,目前在广州工作。Hi!我的英文名是jofun。在2015年01月,我便开始投身于web开发这个行业中,到今天将近有3年的时间了,目前在广州工作。";

elli.clamp(".set-omisSpace", {
clamp:1,
textData:mixText,
omisSpace: "3px",
omission: '...',
appendHTML: '<i>more</i>',
});[/quote]

注意:这里的“textData”属性为要添加到元素中的文本,默认为空,为空时会获取元素原有的文本。

该插件只对“纯文本”有效。

评论 ( 5 )
最新评论
lut09010909 3F 2018-01-15 11:57:24 5F

恩,好使了。我以为一步(new)就能解决呢。

卓卓亭亭兮 3F 2018-01-15 11:47:48 4F

必须要先实例化

卓卓亭亭兮 2F 2018-01-15 11:47:07 3F

你看下demo

lut09010909 2018-01-15 11:45:03 2F

不能用啊。。。

lut09010909 2018-01-15 11:36:50 1F