添加更多指向 jQuery Autoellipsis 的链接?(自动省略号在文本末尾添加固定高度的"...")



我正在使用一个名为Autoellipsis的jQuery插件。

在文本末尾添加固定高度的"…"

例如:

带省略号和高度:

<div style="height 20px;">

Lorem ipsum dolor sit met, consecteer adipsing elite, sed diamam非稳态稳态稳态稳态稳态稳态稳态稳态稳态稳态稳态volutpat…

</div>

不带省略号和高度:

<div>

Lorem ipsum dolor sit met, consecteer adipsing elite, sed diamam非稳态稳态稳态稳态稳态稳态稳态稳态稳态稳态稳态volutpat Lorem ipsum - dolor - sit - met,连续上升的精英,使用

</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 ipsum dolor sit met, consecteer adipsing elite, sed diamam非稳态稳态稳态稳态稳态稳态稳态稳态稳态稳态稳态Volutpat (Volutpat)是一个偶然事件,而不是偶然事件,而不是偶然事件。阅读更多

这样,当你点击省略号后面的阅读更多链接时,全文就会出现(例如,只保留两行文本)。

有什么建议吗?

编辑:

插件选项(以防万一):

。省略号([selector], [options])

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

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

setTitle设置受影响元素的title属性原创内容。可以设置为never, onEllipsis或总是这样。当使用onEllipsis时,将只设置title属性当元素的内容确实被省略时。默认为从来没有。

live当设置为true时,对当前和未来执行省略号元素匹配jQuery选择。也重新应用省略号当目标元素的维度发生变化时。小心使用,比如这个模式轮询选择元素。默认为false。

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

从插件的源代码来看,设置对象是这样的:

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

所以ellipsis选项实际上不是一个字符,而是(默认情况下)三个字符。快速浏览代码并没有发现任何使用神奇数字3的明显位置,因此很有可能您可以简单地提供不同的ellipsis选项,如

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

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

最新更新