添加一个更多的链接到jQuery Autoellipsis？ （Autoellipsis在固定高度的文本末尾添加“...”）

Question

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

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

例如：

使用省略号和高度：

<div style="height 20px;">

  

Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat   volutpat ...

</div>

没有省略号也没有高度：

<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>

要应用省略号，您只需执行此操作 （仅当元素具有高度时才应用省略号）：

  // 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 amet，consectetuer adipiscing elit，sed diam   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat   volutpat euismod tincidunt ut laore tincidunt ut laoreet ... 阅读更多

所以当你点击省略号后面的阅读更多链接时会出现全文（例如只保留两行文字）。

有任何建议可以实现这一目标吗？

修改

插件选项（以防万一）：

  

.ellipsis（[selector]，[options]）

     

对jQuery选择执行省略号。可选的选择器定义   将受省略号操作影响的子元素。   selector选择器选择要执行省略号的子元素   上。如果没有给出选择器，则插件默认为执行   所有子元素的省略号。 options一个附加选项的映射   传递给方法。支持的是：

     

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

     

setTitle 使用设置受影响元素的title属性   原始内容。可以设置为never，onEllipsis或   总是。使用onEllipsis时，只会设置title属性   当元素的内容确实是椭圆形的时候。默认为   从未

     

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

     

该方法返回jQuery对象以进行链接。

Answer 1

从插件的来源，设置对象如下所示：

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

因此ellipsis选项实际上不是一个字符，而是（默认情况下）三个字符。快速浏览一下代码并没有显示出使用魔术数字3的明显位置，因此您很有可能只提供不同的ellipsis选项，例如

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

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