ThreeDots

jquery-logo-256

Episode 10

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ĭ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 (e.g. number of rows within a container of explicitly defined width) 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.10_20100125.zip

Demo

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

Known Issues

  • None

Release Notes

Version 1.0 – 2009.10.28
Initial release.

Version 1.0.1 – 2009.10.28
[FIXED] num_row variable storage would result in erroneous calculations on variable padded and sized containers

Version 1.0.3 – 2009.10.30
[FIXED] optimized underlying algorithms for the significant improvement of ThreeDots’ performance/speed via private pre-processing function the_bisector()
[UPDATE] long word overflow logic more robust
[UPDATE] started putting versioning information in the minified plugin

Version 1.0.4 – 2009.12.29
[FIXED] bug in bisector was incorrectly truncating lines <= max_rows limit (thanks Giuseppe)

Version 1.0.5 – 2010.01.02
[FIXED] handle ‘em’ values returned where previously assumed always ‘px’ returned (for Chrome)

Version 1.0.6 – 2010.01.06
[FIXED] fixed saving of saved original text (thanks Yvo)

Version 1.0.7 – 2010.01.08
[FIXED] edge condition concerning super long words

Version 1.0.9 – 2010.01.22
[UPDATE] confirmed compatible with jQuery 1.3 and 1.4
[FEATURE] added Chrome compatibility

Version 1.0.10 – 2010.01.25
[FIXED] re-fixed 1.0.6

If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy

About these ads

120 thoughts on “ThreeDots

  1. Pingback: ThreeDots: The jQuery Ellipsis Plugin « The Product Guy

  2. Pingback: Tweets that mention ThreeDots « The Product Guy -- Topsy.com

  3. I’ve found a small bug in that the orginal text was cut off (seen when using alt_text_t or alt_text_e true).

    The orginal text is saved ‘after’ running it through you’re “preprocessor” resulting in cut of text being saved in the var init_text_span.
    Moving the line above the call to the function the_bisector fixes it.

    Thankx for this great utility.

    Like

    • Regarding bug [12237] it has been corrected as of version 1.0.6 [available http://tpgblog.com/threedots & latest release at jquery repository]. Please let me know if you still experience problems after updating to the latest version.

      Regarding HTML removed: The behavior you describe is by design. Only text within the container is supported since one of the core assumptions is uniform line height for all of the lines/rows. Currently, you are allowed to style the text of the container to anything desired.

      BUT, handling HTML would definitely be very cool and I am brainstorming on how to possibly implement it in a compact and efficient manner. Would love to get your thoughts on desired behavior / implementation.

      Should anchor tags be able to be truncated? Anchor tags, due to truncation, could potentially be removed all together?

      Should nested HTML structures be supported? What HTML styles should be supported? [span] [b] [i] [u] …

      Remember, a table is valid HTML and I don’t see how that would be truncatable… but I am open to ideas / suggestions.

      Like

      • Jeremy, great script. I’m utilizing it right now live on our front page our city’s website. My only issue is the above mentioned. Have you or anyone developed a way to truncate using the elipsis; however, keeping html formats or at least shortcodes.

        Like

  4. Pingback: jQuery ThreeDots: yayQuery Plugin of the Week! « The Product Guy

  5. hi,

    I’ve found out that if you set ‘vertical-align’ or ‘font-size’ on span element that is holding text to be truncated (ellipsis_text), the only thing you’ll end up with when setting max_rows to 1, is your ellipsis_string. However, it’s not the case with max_rows > 1.

    anyway, great plugin! thanks!

    Like

    • You may want to check your width. Sounds like the width may be too narrow for the text. Also, just release 1.0.9 with Chrome support and more robust line count calculations. If you are still having difficulty I would be happy to check out the code to see what may be going on.

      Like

  6. Just beeing trying to get your plugin to work but with no luck.

    I am trying to get it to work within an however stepping through the code it doesn’t seem to thing there is more than 1 row (I am trying to keep it to 1 row). On an example I tired the copy wrapped over 3 lines but the plugin still claimed it was one?

    Like

  7. Hi Jeremy!

    When a text surrounded by a link is truncated by ThreeDots then the link disapears and only the text within stays. Is that a bug or have I misunderstood something.

    Like

  8. Is it possible to detect if text is ellipsed or not?
    Like this:
    var obj = $(‘.ellips2line’).ThreeDots({max_rows: 2});
    if(obj.isEllipsed){
    alert(“text ellipsed”);
    }
    else{
    alert(“text NOT ellipsed”);
    }

    Like

    • To know if text has been ellipsized I would compare the final text to the original text stored in the ‘ellipsis’ attribute OR simply check for the presence of the threedots_ellipsis span within the container object.

      Like

  9. Nice plugin.
    How can I update text after threedots was already called.
    After updating a database, I must update the new text in the list. In every list-item is a div where the text is truncated with threedots.
    After the update I cannot call threedots.update correctly. I end up with one letter (or none), or the entire text.
    Any idea’s?
    jaan

    Like

    • What version of ThreeDots are you using? Which browser are you using? Can you provide me with HTML and JS that I can run on my local machine that can replicate the behavior you are describing?

      Like

  10. The plug-in works great in all but one case. If the content being truncated is a child of a parent that has display:none, the truncation shows only one letter. So, “Foo Is The Bar” becomes just “F”.

    I can hold off on applying the truncation until the content becomes visible but it’d be nice if it worked on hidden text.

    Like

    • An object with display:none has no defined height and therefore can have no defined number of rows of text. To determine how many lines a piece of text takes up it cannot be set to have no height — the result of using display:none.

      If you want to truncate text before it is seen I recommend 1 of 2 options: (1) place the hidden object offscreen before moving the truncated text into visible place, or (2) instead of display:none, use visibility:hidden. For some of my personal implementations of the plugin I use various combinations of these two options depending on the desired user experience.

      Like

      • I think my issue is related but the hiding is being done by jquery and I don’t know how to get around that. I have a page with tabs here: http://www.orchid-tech.com/summary-new.html. It displays the latest tab first. Only 13-24 and 1-12 are populated now. The opening tab works fine but when I click on the 1-12 tab the truncated text only displays the first letter. I think the answer is in the code below, but I don’t know how to fix it. Been using the Tabs code for awhile and am just trying to add ThreeDots to make a nicer grid. Any guidance would be greatly appreciated.

        // Tabs
        jQuery(document).ready(function(){
        //if this is not the first tab, hide it
        jQuery(“.tab:not(:last)”).hide();

        //to fix u know who
        jQuery(“.tab:last”).show();

        //when we click one of the tabs
        jQuery(“.htabs a”).click(function(){

        //get the ID of the element we need to show
        stringref = jQuery(this).attr(“href”).split(‘#’)[1];

        //hide the tabs that doesn’t match the ID
        jQuery(‘.tab:not(#’+stringref+’)’).hide();

        //fix
        if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == “6.0”) {
        jQuery(‘.tab#’ + stringref).show();
        }
        else

        //display our tab fading it in
        jQuery(‘.tab#’ + stringref).fadeIn();

        //stay with me
        return false;
        });

        jQuery(‘.text_here’).ThreeDots({ max_rows: 11 }); // USE DEFAULTS

        });

        Like

    • Glad you like the plugin. The original text is always stored within the ‘threedots’ attribute. This is intentionally done to enable other developers to extend the core functionality. Using the text within ‘threedots’ you should have no problem enabling a show/hide function; with or without the mouseover alt being displayed.

      Hope that helps. When you implement it, I’d love if you’d share the URL and place where you implemented it so that others can learn from your implementation.

      Like

      • If we assume you make the ellipsis span contain, in my case a span that appears to be a link with the text “more…” you can add this function to the click events of any of these elements (assuming you don’t bury them any deeper). Click… and SHOW the full text. I am using threedot.js to truncate elements of class “post_body”

        $(‘.three_dots_more’).click(function(e){
        var parent_span = $(this).parent();
        var post_body = parent_span.parent();
        var full_text = post_body.attr(‘threedots’);
        post_body.html(full_text);
        });

        Like

  11. Nice idea! Sadly I don’t seem to be able to get any of the demos to work on any browser I have on the Mac (Chrome/Safari/Firefox).

    E.g. the demo on this page the generated HTML is:

    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 Clicking on ‘click for more’ naturally fails.

    Like

  12. thank you for plugin!

    if you want it to work while window is resizing, use the code below:

    $(‘.text’).each(function(){
    var obj = $(this),
    txt = obj.find(‘.ellipsis_text’).text();

    obj.ThreeDots();

    $(window).resize(function(){
    obj.find(‘.ellipsis_text’).text(txt);
    obj.ThreeDots();
    });
    });

    Like

  13. Is it possible to set the max_rows to something like 1.3 or 1.5 – do you have any suggestions on modifying to make this possible?

    Love the plugin but need to being able to do 1.5 lines would ROCK!

    Thanks in advance for any tips.

    Like

      • Basically, I have an inline element that sits at the end of the truncated text.

        Something like

        I am truncating the text within the anchor element and the em just slides in on the end. The problem is that 1 line is too short and 2 drops the em to a 3rd line.

        If it were possible to set the length to 1.5 lines then the em could be displayed inline next to the half line.

        Hope that helps and thanks for your suggestions.

        Like

            • Hi Jeremy.

              Thanks so much for trying to help. I was having trouble getting the html to show in my comments. I will try once again and hopefully this will go through.


              .....

              So right now I have threedots working on the anchor within the code above. I have it set to show 2 lines. The problem is that I have the em element there also. So I would like the a element to show on 1.5 lines so that there is still enough room for them em to sit on the second line and not be pushed down.

              Any suggestions would be greatly appreciate. Also feel free to email me at the address provided above if anything is still unclear.

              Thanks!

              Like

  14. Hello, Jeremy:

    I am attempting to use ThreeDots inside a table cell but am having no luck. I have verified that ThreeDots is loading properly and that it is working correctly when applied to a div in the same document.

    I have tried changing the table’s layout to fixed, but that had no effect on ThreeDots behavior.

    Do you have any suggestions for further troubleshooting?

    Thanks!

    Like

  15. Jeremy,

    Thanks for a great plugin. I have a question for you about how to use this plugin inside of a jQuery ajax function. I have a “load more data” function on my site where I load more results like twitter or facebook.

    $.ajax({
    type: “POST”,
    url: ‘url’,
    success: function(value) {
    $(“#content”).append(value);
    $(“.ellipsis”).ThreeDots({max_rows:3});
    }
    });

    However, when I run this it takes the browser 1 minute to run through everything and the browser is not responsive during the process. Is there something wrong with my approach? Any help you could give would be much appreciated.

    Thanks,
    Zach

    Like

  16. Would there be a reason that the following would result in the ellipsis string disappearing? :

    $(“.class”).ThreeDots();

    on certain object hover -> $(this).find(“.class”).ThreeDots.update( { max_rows: 3 } );

    on out -> $(this).find(“.class”).ThreeDots.update( { max_rows: 2 } );

    The max rows are correctly changing but the ellipsis is disappearing… Any help would be greatly appreciated!

    Like

        • I know. Let me clarify again:

          The text is three rows long. So in that first call on that first line, it truncates it so that there is an ellipsis and there are only two rows. On scrolling over one of the parent objects, the rows expand to three and all text is displayed. However, when the rows are put back to two, the ellipsis string no longer appears.

          I hope that makes sense. Thanks for your help!

          Like

            • I emailed you this, but here is just a quick example you can run. I tried this on Chrome, Firefox, and IE on Windows 7.

              fasdf sdf df asdf sdf sadf asdf asdf as afsd fas f

              ——
              $(‘.test’).ThreeDots();
              $(‘.test’).ThreeDots.update({max_rows:3});
              $(‘.test’).ThreeDots.update();

              Like

              • Oh… I guess html doesn’t show up here. But I emailed you the other day (subject line: “Three Dots Bug”). Thanks a lot for helping me!! I really appreciate it.

                Like

                • Hello Jack,

                  It’s a long time since this post but have you ever been able to fix this issue. I am running in to the same issue. Initially truncated to three lines with ellipsis which are expanded on hover. When leaving the element it is truncated to three lines again but without the ellipsis.

                  Thanks,

                  Like

  17. In one instance I see a text being trimmed, but ellipses string is not appended (I have ellipsis_string set to …).
    threeDots attribute is being set correctly.

    What could be possible reasons for this behavior?

    Like

    • Please provide me with self contained source code that I can use to test locally. Also, please let me know within what browser, browser version, and OS you experienced this behavior.

      Like

  18. Back to the Text vs Html quandary you were expressing earlier this year. What if you were to leave in line break markup like p and br elements? That would allow you to treat all text as the same height, and possibly allow a simplified interim solution, while you contine to brainstorm on other markup. Currently, after you’ve removed p elements, then there isn’t even a space as a word break, let alone a line break! Leaving in nbsp elements or converting them to space instead of empty strings would be cool too:o)

    Oh, BTW, congratulations on a great plugin – it appears to be the only one that will cope with variable heights (via the number of rows property) Kudos!

    Like

    • Right now I make use of $().text(). If there are more flexible, lightweight drop in replacements let me know. Until then, keep the suggestions coming as I explore homebrewing a robust solution.

      Like

  19. Could you help? I’m stuck on the most basic example. This isn’t working for me (Firefox 3.6.12):

    myemailaddress@gmail.com

    I tried this, along with the default values:

    $(‘.text_here’).ThreeDots({max_rows:1,whole_word:false,allow_dangle:true});

    The result that I get is the whole content (email address) displayed (wrong), while only 120px is yellow-highlighted (correct), and no ellipsis. As soon as I add a space and a word with at least 3 characters, I get ellipsis to work:

    “myemailaddress@gmail.com abc”

    Thanks for your time.

    Like

      • Hi,

        I don’t have any public website to host an example, but here’s the complete HTML:

        <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
        <html xmlns=”http://www.w3.org/1999/xhtml”>
        <head>
        <title></title>
        <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script>
        <script type=”text/javascript” src=”http://theproductguy.com/threedots/js/jquery.ThreeDots.js”></script>
        </head>
        <body>
        <div class=”text_here” style=”width:120px;background:yellow;font-family:Verdana;font-size:16px;”>
        <span class=”ellipsis_text”>myemailaddress@gmail.com</span>
        </div>

        <script type=”text/javascript”>

        $(document).ready(function()
        {
        $(‘.text_here’).ThreeDots({max_rows:1,whole_word:false,allow_dangle:true,alt_text_t:true});
        });

        </script>
        </body>
        </html>

        Like

      • I pasted an example here, and it looked like it was accepted but pending approval. Did you not receive it, or was there something that you didn’t like about it?

        Like

        • We have some funky caching going on here: my comment with that HTML above didn’t show for days, and it suddenly reappeared after I posted another comment.

          Like

  20. HTML related to my previous comment:

    <div class=”text_here” style=”width:120px;background:yellow;font-family:Verdana;font-size:16px;”>
    <span class=”ellipsis_text”>myemailaddress@gmail.com</span>
    </div>

    Like

  21. Very cool plugin. I have a site where i was hoping to use this to truncate around 900 items per page. When loading the page the client browser takes a very long time to process (~30 seconds). Usual page load is right around 1 second with the same data (untruncated). Is there a functional limit to the amount of data that can be processed? I suspect that is my issue, but just making sure.
    Because most of the items are hidden at page load (jQuery Ui tabs), one solution would be to apply this only to items that *ARE* visible. Is this possible? Thanks.

    Like

  22. Hi,
    I have got a different requirement where in i want my text to be inside div
    ie
    text
    text2 …

    rather than all text inside a span tag
    as in span tag i am unable to do anything on click of individual words…
    Please suggest me….

    Regards,
    Amit

    Like

  23. I have a problem, when i try to use the threedots.demo.html (from the zip file). on row 29, i tried just to change the lines number from 2 to 3, and it cuts the last word and i don’t have the ellipsis word (“click here”).

    Any ideas please ?

    Thanks

    Like

  24. in the demo html (includes in the zip file) when i change row 29 to 3 lines instead of 2, i receive strange behavior. there is no ellipsis word.

    any idea ?

    Like

  25. Pingback: The best of all the Ellipsis JQuery Plugins « Tim Neil's Blog

  26. If there are lengthy words in a middle of sentence, the text after applying threedots exceeds the given max_rows.
    Please correct me if i am doing anything wrong?

    For example…

    $(‘.text_here’).ThreeDots({ max_rows: 2,whole_word: true});

    and text something like this

    jjj ssssssssssssssssssssssssssssssss ssssssssssssyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy77777777777777 jjjjjjjjjjjjjjjjjjjjj

    Thanks for your time….

    Like

  27. This looks brilliant. I would love to use this to shorten the long descriptions i pull in from my twitter feed, but since it’s dynamically generated, I think it’s impossible. I can’t find any way to insert the since the feed is pulled directly from delicious.com. Grrr. Is there any way to accomplish this?

    Like

  28. Thanks for this nice plugin.

    Only problem why I can’t use it: I need text to stay on 2 lines, also after a text-resize of the user.
    Now, after a text-resize, the ellipsis text goes over 3 lines again. So I guess my question is, how can I re-elliptisize after a text resize?

    I tried limiting my text in css to a max-height of 2 line-heights, so in case of a text resize all but the first 2 lines are visible (an acceptable solution in my case). But this messes up the workings of the plugin…

    Like

  29. HI there,

    Is there a way of apply your code to toggle divs?, so for example, when the user loads the page, these divs will apper collapsed with ellipses, and then when the user clicks over one of those divs the div expands showing all its content. The user can collapse/expand these divs as many times as needed.

    Cheers?

    Like

  30. Hey, nice plugin, I think there is an issue with firefox when trying to apply whole_word:false to a long word, I see there are other comments below that may be related with this one, I’m trying to figure it out by reading the source but I just let you know if you don’t. Cheers.

    Like

  31. If I set it like this “$(‘.addEllipsis’).ThreeDots({ max_rows: 3 });” then IE9 only shows 2 lines. If I set it to 4, the IE9 shows me 3 lines. Is this a known bug? BTW, it works fine in IE7 and IE8.

    Like

  32. Hy,
    thanks for this great piece of code.
    Unfortunately i have a problem with line-hight. I have a div with font-size: 15px and i want to trim it to three lines. This works if i set the line-hight to 18px – but when i set it to 17px threedots cuts the text after two lines. any idea how i could fix that?

    Thanks!

    Like

  33. This plugin does not work when a specific font-size is set for Chinese characters. You can try this:

    .text_here {
    width: 180px;
    font: 11px;
    }

    中华人民共和国中华人民共和国中华人民共和国

    $(‘.text_here).ThreeDots({max_rows: 1, whole_word: false, allow_dangle: false});

    I am afraid there is a bug in the num_rows() function, where I guess the number of rows should be rounded downwards to the nearest integer.

    if ( (the_type == ‘object’)
    || (the_type == undefined) ) {

    // do the math & return
    return Math.floor($(obj).height() / cstate.lh);

    }

    Could you please take a look? Thanks.

    Like

    • This is an IE7 specific issue.

      <div class=”text_here_ellipsis”>
      <span class=’ellipsis_text’>中华人民共和国中华人民共和国中华人民共和国</span>
      </div>

      Like

  34. Pingback: Ringraziamenti | LodLive blog — browsing the web of data

  35. When I apply the plugin with the following text “ACETAMINOPHEN/CAFFEINE” , then plugin not detecting the word length. I included “/” char to valid_delimiters, but no luck.
    Note: I debugged the code and found some thing wrong inside the_bisector(), the first condition is always satisfies and returns back. Due to that word length is not calculating and returns back. Is it a bug or I misused it?

    Like

  36. Firstly, thanks for the plugin, however I have an issue. The following appears to happen:-

    M


    jQuery(‘.ellipsismaxrows’).ThreeDots({
    max_rows: 3,
    ellipsis_string: ‘…’
    });

    And the div class=”ellipsismaxrows” is set to width: 400px;

    Any ideas why this is happening?

    Thanks in advance for your help.

    Phil

    Like

    • Its stripped the html sorry:-
      <div class=”ellipsismaxrows” style=”” threedots=”MDB2 Error: no such field”>
      <span class=”ellipsis_text”>M</span>
      </div>

      Like

    • Figured this out, went up the DOM looking for the cause of threedots not being able to determine container object height and found a display: none three or four parents up the tree. Removed it and hey presto it works!

      Like

  37. hai ,i have a problem here , when use your plugin the text show like this

    **********
    Redefine your workday with the Palm Treo Pro smartphone. Perfectly balanced, you can respond to business and personal email, stay on top of appointments and contacts, and use Wi-Fi or GPS when you’re out and about. Then watch a video on YouTube, catch up with news and sports on the web, or listen to a few songs. Balance your work and play the way you like it, with the Palm Treo Pro. Features Windows Mobile® 6.1 Professional Edition Qualcomm® MSM7201 400MHz Processor 320×320 transflective colour TFT touchscreen HSDPA/UMTS/EDGE/GPRS/GSM radio Tri-band UMTS — 850MHz, 1900MHz, 2100MHz Quad-band GSM — 850/900/1800/1900 802.11b/g with WPA, WPA2, and 801.1x authentication Built-in GPS Bluetooth Version: 2.0 + Enhanced Data Rate 256MB storage …
    ****

    original text before use plugin

    *********
    Redefine your workday with the Palm Treo Pro smartphone. Perfectly balanced, you can respond to business and personal email, stay on top of appointments and contacts, and use Wi-Fi or GPS when you’re out and about. Then watch a video on YouTube, catch up with news and sports on the web, or listen to a few songs. Balance your work and play the way you like it, with the Palm Treo Pro.

    Features
    – Windows Mobile® 6.1 Professional Edition
    – Qualcomm® MSM7201 400MHz Processor
    – 320×320 transflective colour TFT touchscreen
    – HSDPA/UMTS/EDGE/GPRS/GSM radio
    – Tri-band UMTS — 850MHz, 1900MHz, 2100MHz
    – Quad-band GSM — 850/900/1800/1900
    – 802.11b/g with WPA, WPA2, and 801.1x authentication
    -Built-in GPS
    – Bluetooth Version: 2.0 + Enhanced Data Rate
    *******

    so ,i want the text to be this

    **********
    Redefine your workday with the Palm Treo Pro smartphone. Perfectly balanced, you can respond to business and personal email, stay on top of appointments and contacts, and use Wi-Fi or GPS when you’re out and about. Then watch a video on YouTube, catch up with news and sports on the web, or listen to a few songs. Balance your work and play the way you like it, with the Palm Treo Pro.

    Features
    – Windows Mobile® 6.1 Professional Edition
    – Qualcomm® MSM7201 400MHz Processor
    – 320×320 transflective colour TFT touchscreen
    – HSDPA/UMTS/EDGE/GPRS/GSM radio…

    ************

    can anyone help me..

    Like

  38. HI,
    First of all thanks for the great plugin. But I am having a issue where it does not work well when the WORDS are LONG. example XYZABCDAAAANANANANANANAN UNKNOWNERRORANANANANANAN with max rows=2 does not create the elipsis. Any suggesions ?

    Like

  39. Hi, this is exactly the plugin I was looking for. Before I start using it – does it work with dots on the left? So say I have blahblahblahblah, it will become …blahblah instead of on the right?

    Like

  40. great plugin, thanks!

    i’ve noticed it doesn’t work when there’s multiple instances of it’s use on the same page. it changes the value of this function: $.fn.ThreeDots.the_selected. this cancels some functionality of the first use of the ThreeDots function. any ideas how to fix?

    Like

  41. I’m a wordpress plugin programmer. We have crafted a plugin which can gather web surfer’s emails
    to your database without the need for their communication. I’m browsing for beta test candidates and also,
    since you really are gaining extensive amounts of
    internet traffic, I’m checking into both you and your internet
    page. Are you feeling still interested?

    Like

  42. By selecting the person themselves, they will know that they are
    making the right connection. Breathing deeply several times can help slow your heartbeat, lower your blood
    pressure and allow you to feel in control again. – Once you
    have made the decision to end it, there may be moments when you’re
    tempted to change your mind and go back on it.

    Like

  43. What many people lack is confidence and, when you hear the experiences of others, you will realize that you can do better than that.
    Perhaps they no longer love you, but how do you feel for them.
    If derek blasberg is just a mid west boy from a fly over
    state, does that mean anyone can move to new york and become a
    ny socialite.

    Like

  44. I blog quite often and I truly thank you for your information. This article has really peaked my interest.

    I will bookmark your site and keep checking for new information about once a week.
    I subscribed to your Feed too.

    Like

  45. Many tell me that their cheating had very little to do with their wife.
    Perhaps they no longer love you, but how do you feel for them.
    Then, I want you to take this opportunity to work on yourself and do all of those things that you’ve been putting
    off that would make you happy.

    Like

  46. Love is put high above by many people and rightfully so.
    We can rule this one out since he said you aren’t the same person he
    fell in love with. In 1928, Sir Alexander Fleming discovered penicillin, known as a miracle
    drug, an antibiotic taken from orange mold.

    Like

  47. Hiya very cool website!! Man .. Beautiful ..
    Wonderful .. I will bookmark your blog and take the
    feeds additionally? I am happy to seek out numerous helpful information here within the publish, we want work out more strategies
    on this regard, thanks for sharing. . . . . .

    Like

  48. Hi there! I realize this is somewhat off-topic but I had to ask.

    Does running a well-established website like yours take a massive amount work?
    I am completely new to blogging however I do write in my journal everyday.

    I’d like to start a blog so I can easily share my personal experience and thoughts online.
    Please let me know if you have any kind of recommendations or tips for brand new aspiring blog owners.

    Appreciate it!

    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