Adding a read more link to jQuery Autoellipsis? (Autoellipsis adds the "..." at the end of text with fixed height)

Question

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.

Ken Redler Ken Redler · Accepted Answer · 2011-08-19T07:03:36

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.

Adding a read more link to jQuery Autoellipsis? (Autoellipsis adds the "..." at the end of text with fixed height)

1 Answers