ThreeDots: The jQuery Ellipsis Plugin

by Jeremy HornDecember 21, 2009December 21, 2009

Many online products employ ellipses within their products to improve various aspects of the User Experience, such as: allowing for easy summary scanning of page content, and fitting more diversity of content into a smaller space. As a result, the time has come for the jQuery ThreeDots plugin. ThreeDots goes beyond similar tools and lets you easily and smartly truncate text for when: text is too long, text doesn’t fit within the available space, you want to employ highly configurable and flexible ellipses within your web product.

Sometimes the text …

… is too long …
… won’t fit within the number of rows you have available.

Sometimes all you need is … ThreeDots! (a jQuery plugin)

For example —

This:	When restricted to 2 lines by ThreeDots, can become:
There was once a brown fox that liked to eat chocolate pudding.	There was once a brown fox that liked to eat …
There was once a brown fox that liked to eat chocolate pudding.	There was once a brown fox that liked to (click for more)

… and most any other permutation you desire.

To Ellipsize

There are many scenarios in the display of online text where shortened, truncated representations are best used. For these scenarios, many products opt for the implementation of ellipses.

el·lip·sis (ĭ-lĭp‘sĭs)

n., pl., -ses (-sēz).

The omission of a word or phrase necessary for a complete syntactical construction but not necessary for understanding.
An example of such omission.
- A mark or series of marks ( . . . or * * * , for example) used in writing or printing to indicate an omission, especially of letters or words.

[Latin ellīpsis, from Greek elleipsis, from elleipein, to fall short. See ellipse.]
from <http://www.answers.com/topic/ellipsis>

Many online products employ ellipses within their products to improve various aspects of the User Experience, such as:

allowing for easy summary scanning of page content, and
fitting more diversity of content into a smaller space.

Most often people truncate the text by character count, on both the client- and server-sides, which does not take into account the variable dimensions of the text being truncated. There are also a few CSS hacks out there, albeit with future standardized support currently being called into question, and custom, per-browser efforts required for successful implementation.

I too, on so many projects, have encountered the challenge of wanting to limit text to only a few lines or make sure that, no matter what, the text always fits within the space provided. People, myself included, on similar product feature missions have been forced to make compromises of design and experience, without the existence of a simple script/tool to carry out the task, to accommodate the time constraints and complexity of coding the ideal solution.

So, finally, I sat down, put the time in, and created the ThreeDots jQuery plugin for…

… when text is too long…
… when text doesn’t fit within the available space …
… when you want to employ highly configurable and flexible ellipses within your web product…

… so that never again, would I, or anyone else have to compromise their vision where that vision bumps up against the need for the smart implementation of ellipses in your web product.

Usage

ThreeDots is a customizable jQuery plugin for the smart truncation of text. It shortens identified text to fit specified dimensions and appends the desired ellipsis style if/when truncation occurs.

Sample 1:

<div class='text_here'>
	<span class='ellipsis_text'>
		TEXT
	</span>
</div>

$('.text_here').ThreeDots();  // USE DEFAULTS
$('.text_here2').ThreeDots({ max_rows:3 });

Sample 2:

<div class='text_here'>
	<span class='ellipsis_text'>
		TEXT
	</span>
</div>

threedots_object = $('.text_here').ThreeDots();
threedots_object.update();

Sample 3:

<div class='text here'>
	<span class='something'>
		TEXT
	</span>
</div>

threedots_object2 = $('.text_here').ThreeDots( {text_span_class: 'something'} );
threedots_object2.update( {text_span_class: 'something'} );

As a Method

When initialized, the ThreeDots plugin creates and assigns the full set of identified text to each container element, class=’text_here’, as a publicly accessible attribute, ‘threedots’. The method implementation supports chaining and returns the jQuery object.

<div class='text_here' threedots='original text'>
	<span class='ellipsis_text>
		original text
	</span>
</div>

Note, to implement the text that you wish to ellipsize, it must be wrapped in a span assigned either the default class ‘ellipsis_text’ or other custom class of your preference — customizable via the options/settings.

If the text becomes truncated to fit within the constrained space as defined by the container element that holds the ‘ellipsis_text’ span, then an additional span is appended within the container object, and after the ‘ellipsis_text’ span.

<div class='text_here' threedots='original text'>
	<span class='ellipsis_text>
		original text
	</span>
	<span class'threedots_ellipsis'>
		...
	</span>
</div>

The span class of ‘threedots_ellipsis’ can also be customized via the options/settings and have it’s own CSS/jQuery styles/actions/etc. applied to it as desired. Put another way, the ellipsis is NOT constrained to ‘…’, but can be any text or HTML you desire.

If any of the specified settings are invalid or the ‘ellipsis_text’ span is missing, ThreeDots will abort its processing and the initial text will be left untouched.

IMPORTANT: The horizontal constraints placed upon each row are controlled by the container object. The container object is the object specified in the primary selector.

$('container_object').ThreeDots();

When using ThreeDots, the following additional methods can be used…

ThreeDots.update()

Refreshes the text within the target object inline with the options provided. Note that the current implementation of options/settings are destructive. This means that whenever settings are specified, they are merged with the DEFAULT settings and applied to the current object(s), and destroy/override any previously specified options/settings.

var obj = $('.text_here').ThreeDots();	// uses DEFAULT: max_rows = 2
obj.update({max_rows:3});				// update the text with max_rows = 3

Settings

By default, the three dots ellipsis (“…“) is used, as shown in the prior examples, and limits text to a maximum of 2 lines. These and many other characteristics are fully customizable, and fully itemized and explained below.

To change these settings, they can either be accessed directly…

$.fn.ThreeDots.settings.max_rows = 4;

… or at the time of initialization or update …

// configuring the initial settings to use
var obj3 = $('.text_here').ThreeDots({ max_rows: 4 });

// changing the applied settings via an update call to the same text region(s)
obj3.ThreeDots.update({ max_rows: 2 });

The default settings data structure is…

$.fn.ThreeDots.settings = {
	valid_delimiters:         [' ', ',', '.'],			// what defines the bounds of a word to you?
	ellipsis_string:         '...',
	max_rows:                        2,
	text_span_class:        'ellipsis_text',
	e_span_class:                'threedots_ellipsis',
	whole_word:                        true,
	allow_dangle:                false,
	alt_text_e:                 false,					// if true, mouse over of ellipsis displays the full text
	alt_text_t:                 false					// if true & if ellipsis displayed, mouse over of text displays the full text
};

The parameters are defined (and all can be overridden) thus…

valid_delimiters

a character array of special characters upon which the text string may be broken up
defines what characters can be used to express the bounds of a word
all elements in this array must be 1 character in length
any delimiter less than or greater than 1 character will be ignored
if valid_delimiters contains no valid content, then nothing will be processed

ellipsis_string

defines what to display at the tail end of the text provided if the text becomes truncated to fit within the space defined by the container object
ellipsis_string can be text or HTML (e.g. ‘<a href=’url’>click for more</a>’)

max_rows

specifies the upper limit for the number of rows that the object’s text can use
if the displayed text is determined to use less than max_rows, then no operations will be performed upon the provided text and no ellipsis displayed
max_rows must be greater than 0 (ZERO)

text_span_class

by default ThreeDots will look within the specified object(s) for a span of the class ‘ellipsis_text’
if the class specified by text_span_class is not found within the selected objects, then no actions will be taken against the incompletely defined objects
if a different class name is desired for stylistic or programmatic reasons, a new, valid string can be specified

e_span_class

if an ellipsis_string is displayed at the tail end of the selected object’s text due to truncation of that text, then it will be displayed wrapped within a span associated with the class defined by e_span_class and immediately following the text_span_class‘ span
just like text_span_class, a different, valid class name can be specified

whole_word

when ThreeDots is fitting the provided text to the max_rows within the container object, this boolean setting defines whether or not the last word can be truncated to maximize the fit of the text within max_rows
if true, then don’t truncate any words and the ellipsis can ONLY be placed after the last whole word that fits within the provided space

e.g.

one time a duck flew
a frog shaped kite

…could become…

one time a duck flew
a (click for more)

if false, then maximize the text within the provided space, allowing the PARTIAL display of words before the ellipsis

e.g.

(continuing from the prior example)

one time a duck flew
a fr (click for more)

allow_dangle

a dangling ellipsis is an ellipsis that typically occurs due to words that are longer than a single row of text, resulting, upon text truncation, in the ellipsis being displayed on a row all by itself

e.g.

one time a duck flew floopydoopydoppydoodoodoodoo

… could become with allow_dangle:true …

one time a duck flew
…

if allow_dangle is set to false, whole_words is overridden ONLY in the circumstances where a dangling ellipsis occurs and the displayed text is adjusted to minimize the occurrence of such dangling of the ellipsis

e.g.

(continuing from the prior example)

one time a duck flew
floopydoopydoppyd…

alt_text_e

alt_text_e is a shortcut to enabling the user of the product that made use of ThreeDots to see the full text, prior to truncation, on mouse-over of the ellipsis
if the value is set to true, then the ellipsis span’s title property is set to the full, original text (pre-truncation) allowing the text to be seen by mousing over the ellipsis, if present
if the value is set to false, then the title value is left unaffected
this feature can be used in place of, or in conjunction with, additional styles or desired behaviors associated with mouse interactions of the selected object(s)
alt_text_e usage is not required to define your own custom interactions

alt_text_t

alt_text_t is a shortcut to enabling the user of the product that made use of ThreeDots to see the full text, prior to truncation, on mouse-over of the ellipsized text
if the value is set to true AND the ellipsis is displayed, then the text span’s title property is set to the full, original text (pre-truncation) and the text can be seen by mousing over the truncated text, if the ellipsis is present
if the value is set to false, then the title value is left unaffected
this feature can be used in place of, or in conjunction with, additional styles or desired behaviors associated with mouse interactions of the selected object(s)
alt_text_t usage is not required to define your own custom interactions

Get It

You can download ThreeDots, dual licensed under GPL and MIT, from…

jQuery Repository
http://plugins.jquery.com/project/ThreeDots

Git
Public Clone URL: git://github.com/theproductguy/ThreeDots.git
GitHub: http://github.com/theproductguy/ThreeDots

Zip
http://plugins.jquery.com/files/jQuery.ThreeDots_source-bundle_1.0.3_20091030.zip

Demo

http://theproductguy.com/threedots/threedots.demo.html

Status updates can be found here, jQuery ThreeDots.
If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

104 comments

Darcy Murphy says:

December 21, 2009 at 3:06 pm

Just a note, but the proper HTML escaped character entity is … or … (that’s ampersand—”hellip”—semi-colon or ampersand—hashmark—”8230″—semi-colon if the comment filter screws this up).

http://www.w3.org/TR/html4/sgml/entities.html

LikeLike
1. Jeremy Horn says:
  
  December 21, 2009 at 3:57 pm
  
  And the cool thing about ThreeDots is you can use whatever you like for the ellipsis, three dots, the ellipsis character, or even strings/links like ‘click for more’.
  
  LikeLike
Pingback: uberVU - social comments
Adam says:

December 24, 2009 at 4:49 am

I’ve been waiting my life for this. Thank you!

LikeLike
Pingback: ThreeDots : jquery Plugin for Ellipsis (truncating) « TipsInBox
Pingback: ThreeDots: The jQuery Ellipsis Plugin « The Product Guy « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
Pingback: ThreeDots: The jQuery Ellipsis Plugin « The Product Guy » Web Design
Pingback: ThreeDots: The jQuery Ellipsis Plugin « The Product Guy : Popular Links : eConsultant
Damian Dawber says:

December 26, 2009 at 6:44 pm

Extra bulk to the code.

An additional server request.

Won’t ever degrade gracefully.

I don’t see why people shouldn’t write in this functionality as and when required. That said, the onus is, really, on you to open source work of this nature, so thank you for that.

LikeLike
1. Jeremy Horn says:
  
  December 28, 2009 at 2:26 am
  
  The great value in jQuery plugins is to make it so that people don’t have to re-invent the wheel that has been refined and thoroughly thought through by others.
  
  BTW, this plugin doesn’t have any server calls and degrades quite gracefully (e.g. no javascript, no problem) — it is all client side computation and manipulation; more flexible and powerful than the (still pending) CSS3 implementation of ellipsis. If you have suggestions for features, refinements, please send ’em on in. I’d love to continue to evolve ThreeDots.
  
  LikeLike
  1. Damian Dawber says:
    
    December 29, 2009 at 7:49 pm
    
    It’s just that I wonder how difficult it is to write in this functionality yourself, as and when you require it? When, for example, would a coder require all, or most, of the functionality on offer? The problem with plugin architecture, I think, is that people all too willingly stick a plugin into their page without actually thinking about the cost-benefits (cost = size, extra bandwidths, time; benefits = cross-browser compatability, code refinement, ease of accomplishing complex tasks).
    
    One potential application of this plugin, I guess, would be to keep layouts more consistent – depending on the level of consistency required, or, in fact, the nature of a design, we might have to go and write in this functionality on the server side anyway.
    
    This is actually what I meant by the plugin not ‘degrading gracefully’ – if an x-words bunch of text is ‘ellipsized’ on the front end, we’re left with an x-words bunch of text when JS is turned off, the effects of which might cause poor layout, ridiculously long pages, etc. I guess I can’t see why we would ever want the front-end to take care of this for us.
    
    But anyway, that’s just me, and I’d appreciate responses to the contrary.
    
    One thing I notice is that the demo doesn’t work properly on Google Chrome (v. 3).
    
    LikeLike
    1. Jeremy Horn says:
      
      December 29, 2009 at 8:01 pm
      
      Currently, only FF and IE are supported (exact browsers and versions tested are listed in the documentation and the non-minified source code).
      
      Chrome will be supported in the upcoming release.
      
      LikeLike
      1. Morph says:
        
        January 21, 2010 at 9:57 am
        
        Hi.. when will there be an update?
        
        LikeLike
        
        Jeremy Horn says:
        
        January 21, 2010 at 2:40 pm
        
        Constantly exploring new features and other efficiencies.
        
        LikeLike
    2. lkw says:
      
      December 30, 2009 at 1:40 am
      
      One of the biggest reason to do it in the front end is the fact that the actual font being used which affects font size (width in particular) is dependent on the client side computer’s available font and the container’s width is dependent on the browser’s box model (width, padding, margin, border, etc) and rendering engine. If you want to guess all that on the server side, well go ahead.
      
      Also, the desired width and height may need to be determine on the fly on the client side depending on other components’ layout. If you let server do this, then every resize on the client side will result in a network call. That’s slow and a waste of server resources. Let server focus on doing things that the client can’t.
      
      As far as degrading gracefully, I think the expectation is for the site to be usable. No one expects a site to look the same without css/js. Seriously, this is 2010 (ok, 1 more day.)
      
      LikeLike
    3. chichilatte says:
      
      June 18, 2012 at 12:34 pm
      
      Dude, i’d like you see you try to limit a span to a certain number of rows on the server side. Good luck to you!
      
      LikeLike
Pingback: 18 Latest jQuery Plugins for Your Next Project | Onextrapixel - Showcasing Web Treats Without Hitch
Pingback: The Product Guy: Superfine in 09 « The Product Guy
Pingback: jQuery Blend | WebDesignExpert.Me
Pingback: Twitted by betten
axe says:

January 26, 2010 at 5:22 pm

Hi,

it is awesome! but one thing I found it doesn’t work properly on window resize. (Yes, I’ve attached the same handler to window.onresize)

any ideas?

Thank you

LikeLike
1. Jeremy Horn says:
  
  April 5, 2010 at 9:51 pm
  
  Can you please provide me with sample code that I can run locally to evaluate this scenario?
  
  LikeLike
  1. Ryan says:
    
    October 26, 2011 at 5:56 pm
    
    were you ever able to come up with a fix for this? I am also having the same issue
    
    LikeLike
2. Krist says:
  
  November 3, 2011 at 4:27 pm
  
  Yeah.. this plugin not work to “nowrap” span on window resize.. So, we need resfresh browser
  
  But i love this plugin.. SImple code for stronger 🙂
  
  LikeLike
Nicola says:

February 24, 2010 at 5:59 am

There is a method to set no ellips for html anchor?
I’ve a problem with truncation of link.
Thanks

LikeLike
1. Jeremy Horn says:
  
  February 24, 2010 at 9:02 am
  
  Ellipsis is designed to truncate text. If you are using it to truncate an anchor, I recommend a solution that I know others are using: FIRST, apply threedots; SECOND, use jQuery’s wrap() wrap the result in “A” (an anchor)
  
  LikeLike
Tom says:

March 11, 2010 at 1:16 pm

Bug in IE8? Run a truncate on the following anchor tags to limit them to 1 line: http://pastie.org/865302

$(“a”).ThreeDots({ max_rows: 1 });

On all other browsers the output is the same. But in IE8 (not compatibility mode) the first one truncates to 2 lines.

LikeLike
1. Tom says:
  
  March 11, 2010 at 4:43 pm
  
  I’m using the XHTML 1.0 Transitional Doctype, without any Doctype it works fine.
  
  LikeLike
  1. Jeremy Horn says:
    
    March 11, 2010 at 11:39 pm
    
    Is this the doctype you used?
    
    Do you get the same results when working with these doctypes?
    
    Can you send me a pastie of the full file so that I can see all the HTML, CSS, JS involved?
    
    LikeLike
    1. dahyland69 says:
      
      September 1, 2010 at 12:22 pm
      
      Any results on this? I’m having the same problem
      
      LikeLike
      1. Jeremy Horn says:
        
        September 1, 2010 at 2:34 pm
        
        Can you respond to the questions I posed to Tom?
        
        Also, a self-contained zip file so that I can evaluate locally would help, too.
        
        LikeLike
Raghib suleman says:

April 22, 2010 at 2:25 am

thanks for this plugins

LikeLike
Artur says:

May 26, 2010 at 11:33 am

Hey man, thanks for the plugin.

If I am not mistaken, I found a bug in the update function. The result is that the ellipsis is not added but the text is truncated by the function. The key to reproducing this issue is to set the original length of the text to a value so that after calling the the_bisector function, the the text is now withing max_row constraint.

So, let me now try to describe in details what I mean :).

1. Let’s say you have a container with the following text in it “Ellipsis is a tricky thing”

2. You’re calling the ThreeDots Plugin like that:
jQuery(‘selector’).ThreeDots({ max_rows: 1, whole_word:false});

3. Let’s say that the original text goes over 1 row slightly so that after calling:
the_bisector(curr_this, curr_text_span, nr_fixed); (Line 292)
The text actually is on one line. So imagine that the bisector cut the text and it’s now “Ellipsis is a tricky thi”. And the text fits all on one line

4. Now, we’er on the line 308:
if (num_rows(curr_this, nr_fixed) > max_rows)
Since this condition is false we’re ending right at the end of the function, and the function completes and leaves the text truncated with no ellipsis.

I was using the latest available version from sourceforge:

Version 1.0.10 (Developed in Aptana Studio 1.5.1)
Date: 1/25/2010

LikeLike
1. Kelso says:
  
  June 13, 2012 at 9:31 am
  
  I had the exact same issue with it as well. One fix you can put in yourself until a better one is made up is within the_bisector (or in the ThreeDots.min function d), go to the first if statement and +1 to the max_rows.
  
  So in the case when you specify your max_rows as 1. It will come to the_bisector function see that you currently have two lines and it will prevent it from splitting up your specified text you have.
  
  This way once you get to the check that’s applying the ellipsis itself (line 308), it will return true instead of false, remove the words one at a time until it fits how it should and apply the ellipsis as normal.
  
  Hope this helps those who are running into this issue.
  
  LikeLike
Artur says:

May 27, 2010 at 6:17 am

Hello,

I can reproduce the bug with the following markup:

Ellipsis is a tricky thing.

jQuery(document).ready(function(){
jQuery(‘.Ellipse’).ThreeDots({ max_rows: 1 });
});

I was able to reproduce it on:

1. Windows 2000
– FF 3.5.9
– FF 3.6.4
– IE 6

2. Windows XP
– IE 7
– IE 8

LikeLike
1. Artur says:
  
  May 27, 2010 at 6:21 am
  
  I am not sure if the markup went through correctly, I’ll send you PM once i am back home and have access to my private email
  
  LikeLike
fatih says:

July 2, 2010 at 3:51 am

really smart, thanks.

LikeLike
Suresh N says:

July 2, 2010 at 11:07 pm

ellipsis does not work on Firefox. So i found another plugin for ellipsis to work in Firefox.
Below one works but very slow when there are more than 100 div’s.

if (navigator.userAgent.indexOf(“Firefox”) != -1) {
$(“.yui-content div[class*=’ellipsis’]”).ellipsis();
}

Currently i found this blog, but when i tried to do samething in my code, it does nothing.

if (navigator.userAgent.indexOf(“Firefox”) != -1) {
var obj_text = $(“.yui-content div[class*=’ellipsis’]”).ThreeDots({ max_rows: 1 });
}

Any idea, why it is not working?

LikeLike
Melih Çelik says:

July 16, 2010 at 6:48 am

Hi,
Thanks for the plugin, it saves lots of time and effort really.

But there’s a bug that I’ve come up to, I don’t know where to report this bug (or it is reported already). So forgive me if I’m taking your time.

The bug occurs when “whole_word” property is to false and a long character without any valid delimiters are entered. It splits the word as desired if the longword is inside the sentence, but it fails if the longword is the “first word of a sentence”.. You can re-create the bug with this inputs:

Ellipssis initialization:
$(‘#sp’).ThreeDots( {max_rows:1,whole_word:false} );

Html code (works correctly for this sample):
thisisaverylongtextthatneedsToBeSplittedButFailsSinceItIsTheFirstWord

Html code (doesn’t work for this sample):
thisisaverylongtextthatneedsToBeSplittedButFailsSinceItIsTheFirstWord

LikeLike
Zach says:

August 7, 2010 at 10:39 am

Jeremy,

It is weird, I cannot find my previous comment but I was the guy whom had a problem using three dots inside of an ajax event. The problem was that I was trying to reload the entire page and not just what was new. You can find out more on my stack overflow question: http://stackoverflow.com/questions/3426776/three-dots-jquery-on-ajax-load

Thanks again for a great plugin.

LikeLike
1. Jeremy Horn says:
  
  August 8, 2010 at 12:28 pm
  
  I checked out the stackoverflow thread. It looks like you are re-applying ThreeDots to every element, on the event, that has the class ellipsis. If you only want it to apply to new elements, you might want to use a selector like “.ellipsis .new” and perform a removeClass(“new”) when completed. Otherwise, using unique ID’s would definitely do the trick. On my own projects, I have used the “new” approach to much success.
  
  LikeLike
Roman Gavrilov says:

August 17, 2010 at 10:17 pm

Here is a minimalistic example that shows that an ellipsis is not appended to the text, but text is trimmed as expected:

$(function() {
$.fn.ThreeDots.settings = $.extend($.fn.ThreeDots.settings, {
ellipsis_string: ‘…’,
text_span_class: ‘ellipsis’,
alt_text_e: true,
alt_text_t: true,
whole_word: false,
max_rows: 1
});
$(‘div.ellipsis’).ThreeDots();
});

1234 def ghi jkl mnoAxiom>

LikeLike
Roman Gavrilov says:

August 17, 2010 at 10:21 pm

I have this example where ellipsis is not appended when text ends with >

LikeLike
Jeff says:

September 10, 2010 at 10:03 am

Can the plugin be configured to allow line breaks (s) to display, or is the nature of the plugin code such that it requires the stripping of those tags?

LikeLike
1. Jeremy Horn says:
  
  September 10, 2010 at 7:48 pm
  
  Currently ThreeDots converts your input to flat text before calculating the ellipsis.
  
  LikeLike
  1. Jeff says:
    
    January 13, 2011 at 11:32 pm
    
    Been using it for a couple months now, works great except I can’t get single words on a single line to work. Essentially, trying to ellipsify a string of unspaced characters setting “max_rows: 1, whole_word: false”, like a string of WWWWWs or a long URL. Any words of wisdom?
    
    LikeLike
    1. Jeremy Horn says:
      
      January 17, 2011 at 3:37 pm
      
      Working on a fix.
      
      LikeLike
      1. Tom says:
        
        March 10, 2011 at 9:15 am
        
        Yeah, I just spent a day trying to figure out what I was doing wrong. Guess it’s a known issue.
        
        LikeLike
Roman says:

September 23, 2010 at 3:08 pm

ThreeDots drops trailing > symbol and preceding character even if no trimming actually occurs.

E.g. I have <Axiom> text in a span and lots of room. After applying ThreeDots I get <Axio – notice last missing angle bracket AND last letter ‘m’

LikeLike
1. Jeremy Horn says:
  
  September 25, 2010 at 7:03 pm
  
  Can you please provide me with source that I can run locally (HTML, JS, CSS)? What browser version(s) have you experienced this?
  
  LikeLike
  1. Roman says:
    
    September 25, 2010 at 8:56 pm
    
    $(function() {
    $.fn.ThreeDots.settings = $.extend($.fn.ThreeDots.settings, {
    ellipsis_string: ‘…’,
    text_span_class: ‘el_span’,
    alt_text_e: true,
    alt_text_t: true,
    whole_word: false,
    max_rows: 1
    });
    
    $(‘div.ellipsis’).ThreeDots();
    });
    
    <BIRD>
    
    BIRD
    
    LikeLike
  2. rgavrilov says:
    
    October 5, 2010 at 6:25 pm
    
    I don’t see how to upload a project here. You can take it from here http://pugplug.com/files/ThreeDots.zip
    
    LikeLike
Indah says:

October 2, 2010 at 11:14 am

Does this plugin make the web runs slowly, especially on IE ? I’ve tried another way to truncate text with javascript but it causes another problem (web becomes slowly on IE). So, I tried truncate text with css ellipsis, but it causes another problem too.

LikeLike
1. Krist says:
  
  November 3, 2011 at 4:31 pm
  
  I don’t think so.. But this plugin doesn’t work properly on window resize
  and oh, How to truncate with css?
  
  LikeLike
Pingback: Late Night Stop 18 Latest jQuery Plugins for Your Next Project
Amit says:

April 11, 2011 at 8:01 am

When i provided a height to a td, the plugin works weired,
I think that if the given height/line height > num of lines, then all the text truncated.

any ideas ?

LikeLike
Jason says:

April 20, 2011 at 12:02 pm

Thanks for the plugin!

Works good for me in Windows 7 FF and Chrome, but seems like on Safari (iPhone) and FF (Mac) it truncates to L-1 lines instead. i.e. it does 3 lines on Windows 7 FF but 2 lines on Mac FF. Any ideas?

LikeLike
Mark says:

July 15, 2011 at 3:11 pm

Hi,
I’m using ThreeDots in a webpage that is ultimately being displayed through an iFrame in another webpage. I have noticed that from time to time, it seems the ThreeDots script is not being applied to my text or if applied, it only shows the first letter of my sentence. I’m using IE 7 and the code I’m using is shown below:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Have you seen this type of problem or am I doing something wrong?

Thanks in advance.

LikeLike
1. virendrachandak says:
  
  August 2, 2011 at 7:44 pm
  
  I am also facing similar issue. Were you able to solve this issue?
  
  LikeLike
2. Jeremy Horn says:
  
  August 2, 2011 at 7:50 pm
  
  It would be helpful to send a link to a subset of the working code so that myself or others can take a look and advise. Thanks.
  
  LikeLike
Mark says:

July 15, 2011 at 3:16 pm

Hi,
I’m using ThreeDots in a webpage that is ultimately being displayed through an iFrame in another webpage. I have noticed that from time to time, it seems the ThreeDots script is not being applied to my text or if applied, it only shows the first letter of my sentence. I’m using IE 7 and the code I’m using is shown below:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The above html code is enclosed in a “a href” tag.

Have you seen this type of problem or am I doing something wrong?

Thanks in advance.

LikeLike
Mark says:

July 15, 2011 at 3:25 pm

Hi,
I’m using ThreeDots in a webpage that is ultimately being displayed through an iFrame in another webpage. I have noticed that from time to time, it seems the ThreeDots script is not being applied to my text or if applied, it only shows the first letter of my sentence. I’m using IE 7 and the code I’m using is shown below:

class=”text_here” threedots=’Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do’ style=”width:155px;”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

Have you seen this type of problem or am I doing something wrong?

Thanks in advance.

LikeLike
Mark says:

July 15, 2011 at 3:33 pm

Hi,
I’m using ThreeDots in a webpage that is ultimately being displayed through an iFrame in another webpage. I have noticed that from time to time, it seems the ThreeDots script is not being applied to my text or if applied, it only shows the first letter of my sentence. I’m using IE 7 and the code I’m using is shown below:

|td_open class=”style1″ height=”35px;” valign=”top” style=”padding-top:8px;”| |a_open style=”color:114477″ href=”#” target=”_top”||div_tag class=”text_here” threedots=’Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do’ style=”width:155px;”||span_tag class=’ellipsis_text’|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do|span_close||div_close||a_close||td_close|

Have you seen this type of problem or am I doing something wrong?

Thanks in advance.

LikeLike
Grant Bailey says:

November 14, 2011 at 11:50 pm

Dear Jeremy,

Try as I might, I cannot get your plugin to work. I have tried it in both Firefox 3.6 and Chrome.

I have studied your sample code and have read all the comments.

Here is my sample code:

Module 4: Torts — Overview and Elements

.topic_description
{
margin-top: 0.5em;
height: 50px;
overflow: hidden;
width: 200px;
border: black thin solid;
}

$(document).ready(function() {var the_obj = $(‘.topic_description’).ThreeDots({max_rows: 1});});

This topic provides an introduction to the law of torts.
This topic provides an overview of the tort of negligence and describes how the courts determine whether or not there has been a failure to exercise reasonable care and skill.

I would be grateful if you could advise what I am doing wrong. Instead of a truncated line followed by the ellipsis, I get only the ellipsis (no text at all).

Thank you,

Grant Bailey
University of Western Sydney

LikeLike
1. Grant Bailey says:
  
  November 14, 2011 at 11:52 pm
  
  Sorry Jeremy, the coding was taken out of my sample. I will try to email you a copy.
  Grant
  
  LikeLike
2. RG says:
  
  November 16, 2011 at 11:23 pm
  
  I am facing same problem. Pls let me know of any solution.
  
  LikeLike
3. Mangosh says:
  
  June 27, 2013 at 6:49 am
  
  I had same problem, and I fixed it by making sure the object to which threedots ois applied has no fixed WIDTH or HEIGHT, then put that object in a containing DIV which has a width and height. So for example:
  
  CSS:
  .topic_description
  {
  color:#666;
  }
  .containDiv
  {
  margin-top: 0.5em;
  height: 50px;
  overflow: hidden;
  width: 200px;
  border: black thin solid;
  }
  
  HTML:
  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  
  JAVASCRIPT:
  $(document).ready(function() {var the_obj = $(‘.topic_description’).ThreeDots({max_rows: 3});});
  
  That should work brothers!
  
  LikeLike
RG says:

November 15, 2011 at 5:50 am

Auto Classify – Mockup

.text_here{
height:40px;
width:150px;
display:block;
}

$(document).ready(function(){
$(‘.text_here’).ThreeDots({max_rows:2});
});

Refreshes the text within the target object inline with
the options provided. Note that the current implementation
of options/settings are destructive. This means that whenever
settings are specified, they are merged with the DEFAULT settings and
applied to the current object(s), and destroy/override any previously
specified options/settings.

Can anyone tell me whats wrong in the above code. Its only displaying the … and not any line. I am new to this so pls help out..

LikeLike
RG says:

November 18, 2011 at 1:55 am

If the text contains an img tag then its not getting displayed. Is there solution for that?

LikeLike
Randy says:

December 31, 2011 at 12:29 pm

Feature request. I have the need to “ellipsify” the beginning, rather than the ending, of a certain string. I am doing this on a menu path and would like the user to be able to see the end of the string (i.e bread crumb trail), rather than the beginning, if the path gets truncated. Be awesome to be able to specify “ellipsis_location: [start|end]”, or something along those lines.

LikeLike
1. Steve says:
  
  June 29, 2012 at 5:33 pm
  
  I have a request that is similar to this, I need to be able to add the ellipsis to the middle of a line so you can read the beginning and end. This will be for a one liner of course. Text beginning…text end. Is this possible?
  
  LikeLike
  1. Samuele Arcidiacono says:
    
    December 20, 2012 at 8:14 pm
    
    To truncate in the middle, you can use https://github.com/tbasse/jquery-truncate
    I’ll try to make a patch to truncate at the beginning on jquery-truncate.
    
    LikeLike
Pingback: Helpful add on’s that i use « app tutorials
Fabian says:

January 13, 2012 at 2:02 am

Hi!

I definately need this plugin. Unfortunately the jQuery Plugin Site is down.
Can you provide me a working link of your plugin, please?

Cheers!
Fabian

LikeLike
Hages says:

March 14, 2012 at 2:38 am

Hi, I have a potential feature request for you.
Would it be possible to have an option that when the displayed text is less than the max_rows, could the text be padded out so that there is always the max_rows displayed, even if the lower line(s) are blank?
Cheers

LikeLike
Pingback: 超出部分省略号, 兼容各种浏览器 | 顾大侠
Porn Stars says:

August 20, 2012 at 7:29 pm

Having read this I believed it was really
enlightening. I appreciate you finding the time and effort to put this short article together.
I once again find myself personally spending a significant amount
of time both reading and posting comments. But so what, it was still
worth it!

LikeLike
ashish rana says:

September 13, 2012 at 1:09 am

very good plugin… and a great article to introduce it. but it would be great if the need to wrap the text in span with “ellipsis_text” as class name is removed. if this span is created by the plugin itself, it would be great considering minimal dependency it leaves on html structure. Also it would be great we have a destroy function (i havent seen the code, m sorry if it is there :P)….

LikeLike
Lawrence says:

October 25, 2012 at 8:04 am

Why people still use to read news papers when in this technological globe everything is available on net?

LikeLike
acheter parquet says:

November 15, 2012 at 1:50 am

My brother recommended I might like this web site. He was entirely
right. This post actually made my day. You cann’t imagine just how much time I had spent for this information! Thanks!

LikeLike
cheap moscow Hotel says:

January 28, 2013 at 5:22 pm

Hello there, just became aware of your blog through Google, and found that it is really informative.
I’m going to watch out for brussels. I will appreciate if you continue this in future. Lots of people will be benefited from your writing. Cheers!

LikeLike
Kirk says:

March 26, 2014 at 5:17 pm

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog
that automatically tweet my newest twitter updates.
I’ve been looking for a plug-in like this for quite some time and
was hoping maybe you would have some experience with something like this.
Please let me know if you run into anything.

I truly enjoy reading your blog and I look forward to your new updates.

LikeLike
skype quit unexpectedly mac says:

July 25, 2014 at 5:25 am

Sometimes even Microsoft programs can eat up RAM, so you need to watch out
for buggy software. A software bug is an error in a computer program that
either causes problems with the program itself or
results in Windows errors. dll file is missing from the installation of a program on your PC.

LikeLike
Flora Roberts Makeup says:

July 25, 2014 at 9:20 am

Hi there everyone, it’s my first visit att this site, and piece of writong is really fruitful in support
of me, keep up posting these types of posts.

LikeLike
http://storify.com/decorousou464/ansform-your-motor-with-alloy-wheel-repairs says:

August 9, 2014 at 11:35 pm

After exploring a few of the blog posts on your web page, I honestly appreciate you technique oof writing a blog.
I book marked it to mmy bookmark site list and will be checking back soon. Take a look att
my websife as well and tell me how yoou feel.

LikeLike
glucosamine tablets says:

August 15, 2014 at 4:28 pm

This websote was… how do you say it? Relevant!! Finally I’ve found something that heslped me.
Thank you!

LikeLike
pregnancy vs pms says:

August 21, 2014 at 5:06 pm

It’s going to be finish of mine day, except before finish I am reading
this wonderful paragraph to improve my experience.

LikeLike
hair loss black book review says:

August 24, 2014 at 5:06 am

This iis my first time go to see at here andd i am in fact happy to read all aat one place.

LikeLike
precious computer says:

August 30, 2014 at 8:08 pm

Right now it sounds like Expression Engine is the top blogging platform available right now.

(from what I’ve read) Is that what you are using on your blog?

LikeLike
opt in email lists for sale says:

September 1, 2014 at 6:53 pm

you are truly a just right webmaster. The site loading pace iis amazing.
It sort of feels that you arre doing aany distinctive trick.
Furthermore, The contents are masterpiece.
you’ve done a fantastic task on this matter!

LikeLike
online slots free says:

September 4, 2014 at 11:15 am

Everyone loves what you guys tend to be up too. This type of clever work and reporting!
Keep up the amazing works guys I’ve incorporated you guys
to blogroll.

LikeLike
website optimization services says:

September 21, 2014 at 12:39 am

If this is lead generation going on in what would make more profit with that design computer based plans.
Social NetworkingSocial networking sites. Typically not designed for
short attention span. This is becoming smart and effective website so
that tourists can readily find their pages. Members stay ahead in the whole song.

Now, having an informative and valuable suggestions to
the designer.

LikeLike
elliptical Machines says:

September 21, 2014 at 3:07 am

Howdy! I know this is kinda off topic however I’d figured I’d ask.
Would you be interested in trading links or maybe guest writing a blog post or vice-versa?
My site covers a lot of the same topics as yours and I think we could greatly
benefit from each other. If you might be interested feel free to send me an e-mail.

I look forward to hearing from you! Great blog by the way!

LikeLike
Ummah Global Relief says:

September 21, 2014 at 4:55 am

Hello There. I found your blog the usage of msn. That is a very well written article.
I will make sure to bookmark it and return to learn extra of your helpful information. Thank you for the post.
I will definitely return.

LikeLike
Online Marketing Manager says:

September 25, 2014 at 1:53 am

Hello there! I could have sworn I’ve been to this site before but after reading
through some of the post I realized it’s new to me. Nonetheless, I’m definitely delighted I found it and
I’ll be book-marking and checking back frequently!

LikeLike
bmw wheels www.modbargains.com says:

September 25, 2014 at 10:28 am

Hello to every body, it’s my first visit of this weblog; this website
contains remarkable and genuinely excellent
material for visitors.

LikeLike
dubai safari says:

September 25, 2014 at 10:55 am

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have
some experience with something like this. Please let me know
if you run into anything. I truly enjoy reading
your blog and I look forward to your new updates.

LikeLike
Cellulite Factor says:

September 26, 2014 at 5:29 am

Substantiate our cause. A friend was just informed they have this.
We’d like to exhibit our help support!

LikeLike
Https://Facebook.Com/HackerTools says:

September 26, 2014 at 6:31 am

Pretty section of content. I just stumbled upon your web site
and in accession capital to assert that I acquire actually enjoyed account your
blog posts. Any way I’ll be subscribing to your feeds and even I achievement you access consistently quickly.

LikeLike
Lilian says:

September 26, 2014 at 9:24 am

Hmmm it appears like your blog ate my first comment (it was super long) so I guess I’ll just sum it up
what I had writtsn and say, I’m thoroughly enjoying your blog.
I as well am an aspiring blog writer but I’m still new to the whole thing.

Do you have any suggestions for newbie blog writers? I’d genuinely appreciate
it.

LikeLike
Hay Day Triche illimité Diamonds 2014 Android iOS says:

September 28, 2014 at 1:32 pm

Wonderful blog! I found it while searching on Yahoo News.

Do you have any tips on how to get listed in Yahoo News?
I’ve been trying for a while but I never seem to get there!
Many thanks

LikeLike
review diabetes miracle cure says:

September 29, 2014 at 5:24 am

It simply just shows that the individual must discover to
consume nicely nicely balanced meals like vegetables and fruit rather than damaging fast food and junk food.
Then we compound the problem by flooding our bodies with huge quantities
of sugar. This comprehensive analysis of the available treatments will enable
you to judge and find the most suitable e and compatible one for you.

LikeLike
Hostgator discount coupons says:

September 29, 2014 at 11:03 pm

That is very fascinating, You are an overly professional blogger.
I’ve joined your rss feed and look ahead to searching for extra of your fantastic post.
Additionally, I have shared your website in my social networks

LikeLike
auto parts warehouse promo code says:

October 2, 2014 at 5:49 pm

Superb, what a blog it is! This web site presents valuable data to us, keep it up.

LikeLike