 |
 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ĭ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 (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
The Product Guy 
Hi,
This plugin does not work on the latest Google Chrome (4.0.249.43)
Greetings
LikeLike
This plugin has been developed, tested, and confirmed to work in IE & FF.
I will look into Chrome compatibility issues in the upcoming release. Thanks.
LikeLike
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.
LikeLike
Thanks. I will check that out.
LikeLike
Hi,
I posted two issues in your jquery.com issue queue, and was wondering if you had the time to look into these already.
– Full text unavailable after truncating: http://plugins.jquery.com/node/12237 (this might be the same issue as Yvo Nelemens reported; I tried using v1.0.4 of your plugin, since I had only jQuery 1.0.x available)
– HTML removed from truncated text: http://plugins.jquery.com/node/12238
LikeLike
Regarding bug [12237] it has been corrected as of version 1.0.6 [available https://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.
LikeLike
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.
LikeLike
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!
LikeLike
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.
LikeLike
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?
LikeLike
Can you provide a sample of the HTML, JS, CSS that you are using to implement ThreeDots? What browser and version? Also, in addition to the code snippets, a link to the code would be great. I would be happy to take a peek and see what is going on.
LikeLike
Just put the bit with the problem up:
http://mikej.co.uk/threedots/
Hope this helps a little.
Cheers
LikeLike
I’ve worked it out! Its because I didn’t have line-height set!
LikeLike
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.
LikeLike
ThreeDots works on non-marked up content. Text-only.
If you are applying ThreeDots to an anchor, you can use .wrap(““)
http://api.jquery.com/wrap/
LikeLike
Thanks for the tip. It helped and the ellipsis finally looks great. Thanks for a good plugin.
LikeLike
NP. Glad you like it.
LikeLike
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”);
}
LikeLike
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.
LikeLike
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
LikeLike
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?
LikeLike
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.
LikeLike
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.
LikeLike
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
});
LikeLike
Very cool man, but I would like to have an option to “Show/Hide”on the same plan and not on only the Mouseover ALT..
LikeLike
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.
LikeLike
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);
});
LikeLike
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.
LikeLike
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();
});
});
LikeLike
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.
LikeLike
Can you elaborate on the use case? What would 1.5 lines be?
LikeLike
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.
LikeLike
Oops the form killed my formatting. this should be right after Something like. Sorry about that.
<p /p>
Sorry couldnt get it submit the full html.
LikeLike
Can you provide me with a link to an example? I am not sure I m following you 100%.
LikeLike
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!
LikeLike
I think the following will address the issue you are describing. Set the ellipsis setting to your content. For example…
$(‘.mytext’).ThreeDots({ellipsis_string: “posted in category“});
The ellipsis_string supports HTML and can is included in max number of lines calculation, so won’t overflow its space.
LikeLike
I have a few more examples of this within the ThreeDots demo file @ http://theproductguy.com/threedots/threedots.demo.html . Search for the ‘click here’ string on the page. You will see some sample code: the_obj = $(‘.text_here4′).ThreeDots({max_rows:1, ellipsis_string:’(click here)‘});
LikeLike
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!
LikeLike
On the demo page for ThreeDots I use it within a table. Perhaps an answer within that source code for you? If not, send me a zip of your code that I can run locally and checkout to provide more feedback.
LikeLike
Time to increase font size in my editor or get some new glasses! It was a typo.
LikeLike
I recommend Oakley glasses. Just got a pair — they rock. 😉 Glad it worked out.
LikeLike
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
LikeLike
If you can provide a sample of the code that I can run on my local machine I can check it out.
LikeLike
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!
LikeLike
To clarify: the dots appear originally, but disappear once the rows are reduced back to 2 max.
LikeLike
The ellipsis is only displayed when the text exceeds the max_rows.
LikeLike
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!
LikeLike
Can you send me a ZIP of an example of the code that I can run locally to check out next weekend? Also, please let me know browser and OS version you are using. Thanks.
LikeLike
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();
LikeLike
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.
LikeLike
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,
LikeLike
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?
LikeLike
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.
LikeLike
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!
LikeLike
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.
LikeLike
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.
LikeLike
Can you provide me with a link to the example (w/ css, javascript)?
LikeLike
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>
LikeLike
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?
LikeLike
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.
LikeLike
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>
LikeLike
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.
LikeLike
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
LikeLike
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
LikeLike
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 ?
LikeLike
You should use jquery.data insteand of add the text as a attribute in the object.
LikeLike
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….
LikeLike
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?
LikeLike
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…
LikeLike
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?
LikeLike
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.
LikeLike
note: the trouble is only when the long word is the first one in the text wich will be apllied to
LikeLike
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.
LikeLike
Hi, someone have notice about some problems with this plugin and jQuery 1.6.1.1 ?
LikeLike
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!
LikeLike
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.
LikeLike
This is an IE7 specific issue.
<div class=”text_here_ellipsis”>
<span class=’ellipsis_text’>中华人民共和国中华人民共和国中华人民共和国</span>
</div>
LikeLike
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?
LikeLike
Pl ignore the above comment, it is working as expected. Thanks for wonderful plugin.
LikeLike
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
LikeLike
Its stripped the html sorry:-
<div class=”ellipsismaxrows” style=”” threedots=”MDB2 Error: no such field”>
<span class=”ellipsis_text”>M</span>
</div>
LikeLike
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!
LikeLike
Great plugin. Thank you for sharing this! I was able to make good use of it.
LikeLike
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..
LikeLike
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 ?
LikeLike
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?
LikeLike
It seams not work by dots on the left? Do you know how to set this effect?
LikeLike
“ThreeDots | The Product Guy” ended up being a terrific post and thus I really
was in fact very happy to discover it. Thanks for the post-Ivy
LikeLike
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?
LikeLike
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?
LikeLike
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.
LikeLike
Useful information. Lucky me I found your website accidentally, and I am shocked why this accident did not came about in advance!
I bookmarked it.
LikeLike
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.
LikeLike
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.
LikeLike
I enjoy what you guys are up too. This kind of clever work and coverage!
Keep up the superb works guys I’ve you guys to blogroll.
LikeLike
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.
LikeLike
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.
LikeLike
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. . . . . .
LikeLike
Good site you’ve got here.. It’s hard to find quality writing like yours these days.
I honestly appreciate individuals like you! Take care!!
LikeLike
What a information of un-ambiguity and preserveness of valuable knowledge concerning unpredicted feelings.
LikeLike
I blog quite often and I truly appreciate your content.
This article has truly peaked my interest. I am going to book mark
your website and keep checking for new information about
once a week. I subscribed to your RSS feed as well.
LikeLike
Asking questions are in fact fastidious thing if you are
not understanding something totally, except this article gives pleasant understanding yet.
LikeLike
I am regular reader, how are you everybody? This post posted
at this website is in fact fastidious.
LikeLike
Thanks designed for sharing such a pleasant opinion, article is nice, thats why i have read it completely
LikeLike
Perhaps not many people know this blog, but I just found from the search engine and I loved it. I subscribe.
LikeLike
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!
LikeLike
porn movie, porn, rough sex, hard anal, brutal rape
LikeLike
You actually make it seem so easy with your presentation but I find this
topic to be really something that I think I would never
understand. It seems too complicated and very broad for me.
I am looking forward for your next post, I’ll try
to get the hang of it!
LikeLike
You must indulge in a contest for one of the finest blogs online.
I’ll recommend this web site!
LikeLike
Asking questions are genuinely pleasant thing if you
are not understanding anything completely, except this piece of writing
provides fastidious understanding even.
LikeLike
Asking questions are genuinely pleasant thing if you are not understanding something fully, except this article provides fastidious understanding even.
LikeLike
great points altogether, you just won a new reader. What might
you recommend about your publish that you simply made a few days in the past?
Any sure?
LikeLike
Thanks for the good writeup. It in reality was once a amusement
account it. Look complex to far brought agreeable from you!
By the way, how can we communicate?
LikeLike