添加阅读更多链接到jQuery Autoellipsis? (Autoellipsis在固定高度的文本末尾添加“...”)

问题描述:

我正在使用名为Autoellipsis的jQuery插件。添加阅读更多链接到jQuery Autoellipsis? (Autoellipsis在固定高度的文本末尾添加“...”)

它在固定高度的文本末尾添加“...”。

例如:

随着省略号和高度:

<div style="height 20px;"> 

Lorem存有悲坐阿梅特,consectetuer adipiscing ELIT,sed的直径 nonummy NIBH euismod tincidunt UT laoreet dolore蚤aliquam ERAT volutpat ...

</div> 

没有省略号,也没有高度:

<div> 

Lorem存有悲坐阿梅德,consectetuer adipiscing ELIT,sed的直径 nonummy NIBH euismod tincidunt UT laoreet dolore麦格纳aliquam ERAT volutpat Lorem存有悲坐阿梅德,consectetuer adipiscing elit,sed diam dolore magna aliquam erat volutpat。

</div> 

申请省略号,你只需要做到这一点 (省略号仅应用如果元素具有高度):

// Apply ellipsis 
    $j('.reply-content p').ellipsis(); 

HTML:

<div class="reply-content"> 
<span class="topic-author-link"> 
<span class="topic-post-date"> 
<span class="bbp-admin-links"> 
<p> 
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam dolore magna aliquam erat volutpat.</div> 
</p> 

<!-- etc... --> 

我想添加一个阅读更多按钮:

Lorem存有悲坐阿梅德,consectetuer adipiscing ELIT,sed的直径 nonummy NIBH euismod tincidunt UT laoreet dolore麦格纳aliquam ERAT volutpat euismod tincidunt UT laore tincidunt UT laoreet ...... 读更多

所以在省略号后点击read more链接时,出现全文(例如,只保留两行文字)。

任何建议来完成此?

编辑:

插件选项(以防万一):

.ellipsis([选择器],[选项])

jQuery的选择执行省略号。可选选择器定义将受省略号操作影响的子元素 。 选择器选择子元素以执行省略号 的选择器。如果没有给出选择器,则插件默认对所有子元素执行 省略号。选项 传递给方法的附加选项的映射。支持的有:

ellipsis要使用的省略号字符或字符串。默认为 “...”(三个点)。

setTitle设置受影响元素的标题属性为 原始内容。永远可以设置为永远,onEllipsis或 。使用onEllipsis时,只有在元素的内容确实为省略时,title属性才会被设置为 。从不默认为 。

live设置为true时,对当前和未来的 元素执行与jQuery选择匹配的元素。当目标元素的尺寸发生变化时,还会重新应用省略号 。谨慎使用,因为此 模式轮询选择元素。默认为false。

该方法返回用于链接目的的jQuery对象。

从插件的来源,设置对象看起来像这样:

var defaultSettings = { 
    ellipsis: '...', 
    setTitle: 'never', 
    live: false 
}; 

所以ellipsis选项实际上并不是一个字符,而是(默认)三个字符。代码的快速脱脂不转了任何明显的斑点,在使用魔法之三,所以有一个很好的机会,你可以简单地提供一个不同的ellipsis选项,如

ellipsis : ' <a href="something">Read More...</a>'; 

这当然是可能的事情可能打破,但这是一个开始。

+0

谢谢,但现在如何让全文出现? (顺便说一句,我发现在那里留下一个空间挂着浏览器)。 – alexchenco

+0

@alexchenco,有很多方法可以去。您需要某种由点击触发的unEllipsis()函数。未删节的文本必须存储在某个位置,并且该功能会将其替换为删减版本,或者在隐藏或删除删减版本时显示它。 –

+0

@alexchenco如果你需要一个空间,你可以使用“no break space”代码String.fromCharCode(160),例如:ellipsis:String.fromCharCode(160)+'...',它在之前添加了空格。 。 – Tadej