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.

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.

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.

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.

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.

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

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.

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?

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.

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.

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.

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?

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.

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.

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

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.

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();

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.

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”

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.

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.

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.

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.

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.

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.

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.

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!

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:

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.

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

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?

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…

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.

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.

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?

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?

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!

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.

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

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 ?

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?

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?

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.

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.

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.

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.

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

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.

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!