ThreeDots: The jQuery Ellipsis Plugin

jquery-logo-256Sometimes 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ĭpsĭs)

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

  1. The omission of a word or phrase necessary for a complete syntactical construction but not necessary for understanding.
  2. 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: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!
About these ads
This entry was posted in user experience and tagged , , , , , , , , , , , , , , , , , , by Jeremy Horn. Bookmark the permalink.

About Jeremy Horn

Jeremy Horn is an award-winning, product management veteran with thirteen years of experience leading and managing product teams. Jeremy has held various executive and advisory roles, from founder of several start-ups to driving diverse organizations in online services, consumer products, and social media. As founder of The Product Group, he has created the largest product management meetup in the world and hosts the annual awarding of The Best Product Person. Jeremy can currently be found pioneering the next generation of content management and sharing at Viacom, acting as creator and instructor of the 10-week product management course at General Assembly, and mentoring at Women 2.0 and Lean Startup Machine. Follow Jeremy on twitter @theproductguy or his blog at http://tpgblog.com.

107 thoughts on “ThreeDots: The jQuery Ellipsis Plugin

  1. Pingback: uberVU - social comments

  2. Pingback: ThreeDots : jquery Plugin for Ellipsis (truncating) « TipsInBox

  3. Pingback: ThreeDots: The jQuery Ellipsis Plugin « The Product Guy « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  4. Pingback: ThreeDots: The jQuery Ellipsis Plugin « The Product Guy » Web Design

  5. Pingback: ThreeDots: The jQuery Ellipsis Plugin « The Product Guy : Popular Links : eConsultant

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

    Like

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

      Like

      • 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).

        Like

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

          Like

        • 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.)

          Like

  7. Pingback: 18 Latest jQuery Plugins for Your Next Project | Onextrapixel - Showcasing Web Treats Without Hitch

  8. Pingback: The Product Guy: Superfine in 09 « The Product Guy

  9. Pingback: jQuery Blend | WebDesignExpert.Me

  10. Pingback: Twitted by betten

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

    Like

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

      Like

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

    Like

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

    Like

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

      Like

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

    Like

    • 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

      Like

  15. 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?

    Like

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

    Like

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

      Like

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

    Like

  18. 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?

    Like

  19. 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’

    Like

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

    Like

  21. Pingback: Late Night Stop 18 Latest jQuery Plugins for Your Next Project

  22. 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 ?

    Like

  23. 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?

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

      Like

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

    Like

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

    Like

  31. Pingback: Helpful add on’s that i use « app tutorials

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

    Like

  33. Pingback: 超出部分省略号, 兼容各种浏览器 | 顾大侠

  34. 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!

    Like

  35. 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)….

    Like

  36. 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!

    Like

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

    Like

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

    Like

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

    Like

  40. 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!

    Like

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

    Like

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

    Like

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

    Like

  44. I think that everything published was very reasonable. But, think on this, what if you wrote a catchier post title?
    I am not suggesting your content is not good, however what if
    you added a post title that grabbed people’s attention? I mean ThreeDots: The
    jQuery Ellipsis Plugin | The Product Guy is kinda boring.
    You could peek at Yahoo’s front page and watch how
    they write article titles to grab people to click.
    You might try adding a video or a related picture or
    two to grab people excited about everything’ve got to say.

    In my opinion, it might make your website a little bit more
    interesting.

    Like

  45. De originele G1 werd vrijgegeven om veel tamtam en anticipatie op want het was de allereerste Android powered handset te
    worden vrijgegeven. Dit gadget kunt u spelen een aantal interessante games op
    het grote scherm. Gebruikers kunnen een snelheid van maximaal 10 mbps met de meeste MBBOD apparaten als deze gebruik
    netwerk standaarden zoals 3G, 4G, Wifi – MAX en LTE.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s