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

发布于 2024-11-30 21:15:41 字数 2457 浏览 6 评论 0原文

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

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

例如:

带有省略号和高度:

<div style="height 20px;">

Lorem ipsum dolor sat amet,consectetuer adipiscing elit,sed diam Nonummy Nibh Euismod Tincidunt ut laoreet dolore magna aliquam 埃拉特 音量...

</div>

没有省略号或高度:

<div>

Lorem ipsum dolor sat amet,consectetuer adipiscing elit,sed diam Nonummy Nibh Euismod Tincidunt ut laoreet dolore magna aliquam 埃拉特 volutpat Lorem ipsum dolor sat 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 sat amet,consectetuer adipiscing elit,sed diam Nonummy Nibh Euismod Tincidunt ut laoreet dolore magna aliquam 埃拉特 volutpat euismod Tincidunt ut laore Tincidunt ut laoreet... 阅读更多

因此当您单击省略号后面的阅读更多链接时,会显示全文(例如仅保留两行文本)。

有什么建议来完成这个任务吗?

编辑:

插件选项(以防万一):

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

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

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

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

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

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

I'm using a jQuery Plugin called Autoellipsis.

It adds the "..." at the end of text with fixed height.

For example:

With ellipsis and height:

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

Without ellipsis nor height:

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

To apply the ellipsis you only have to do this
(The ellipsis is applied only if the element has height):

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

I would like to add a read more button:

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... read more

so the full text appear when you click the read more link right after the ellipsis (e.g. keeping just two lines of text).

Any suggestions to accomplish this?

EDIT:

Plugin Options (just in case):

.ellipsis( [selector], [options] )

Perform ellipsis on jQuery selection. The optional selector defines
the sub-elements which will be affected by the ellipsis operation.
selector The selector selecting the sub-elements to perform ellipsis
on. If no selector is given, the plugin defaults to performing
ellipsis on all child elements. options A map of additional options to
pass to the method. Supported are:

ellipsis The ellipsis character or string to use. Defaults to
"..." (three dots).

setTitle Sets the title attribute of the affected elements with
the original content. May be set to either never, onEllipsis or
always. When using onEllipsis, the title attribute will only be set
when the content of the element was indeed ellipsed. Defaults to
never.

live When set to true, perform ellipsis on current and future
elements matching the jQuery selection. Also reapplies the ellipsis
when the target elements' dimensions change. Use with care, as this
mode polls the selection elements. Defaults to false.

The method returns the jQuery object for chaining purposes.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

左耳近心 2024-12-07 21:15:41

从插件的源代码来看,设置对象如下所示:

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

因此,省略号选项实际上不是一个字符,而是(默认情况下)三个字符。快速浏览一下代码并不会发现任何使用神奇数字 3 的明显位置,因此您很有可能只需提供不同的省略号选项,例如

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

It's certain possible things might bad ,但这只是一个开始。

From the source of the plug-in, the settings object looks like this:

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

So the ellipsis option is not actually a character, but (by default) three characters. A quick skim of the code doesn't turn up any obvious spot where the magic number three is used, so there's a good chance you can simply supply a different ellipsis option, like

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

It's certainly possible things may break, but it's a start.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文