Special Considerations

Note that if you override the default animation options, you will notice a "new line" inserted at the point of truncation. This is because the hide/show methods require the animated
element to be block level, and thus will begin on its own line.

Also note that jTruncate chooses the split location by starting at the length you specify (or the default) and then finds the next space. This is to prevent truncation in the middle of
an html tag. This implies that the text needs to have spaces in it (duh), and that any tags within the truncated text cannot contain a space (i.e. <p id="myP"> = bad).

Thank you for visiting, and if you have any questions/suggestions at all, just let me know in the comments!

Can you give a specific example of what you're trying to truncate? Keep in mind that any html elements that have a body have the potential to be split in half. For example, if you were to wrap some text in a span, the script could split the text inside the span body resulting in the page rendering with no closing span.

Hi.I really like the main idea of your plugin. Years ago I did a similar solution manually in order to trunk the text which is in a cell within a table (in plain javascript). But I see a main difference, I needed to trunk the text inside a DIV based on the width the TD have when the page is loaded, so, the text is trunk based on the container size instead of a fixed allowed number of characters.

I'm really new to jQuery, so, and I would really like to use your plugin doing some changes according the description I described above.

¿Do you know whether it's possible to do the trunk based in the container width (which is not fixed, it's relative) instead of fixed chars, with your plugin? or Do you have any idea how can I do it?

@kristinYa I think you're definitely right. I originally created the plugin with a very limited need, but especially after making it publicly available, it should support safe tag bodies. If you come up with something certainly let me know, otherwise I'll try and dedicate some time to the issue soon.Thanks for pointing that out!

Hi Jeremy,the plugin looks nice! I created a similar plugin called Expander that also handles nested tags, which can get tricky. Feel free to grab any of the code for your own use if you like it. The only limitation is that it truncates only within a block element, not across multiple block elements. Henrik has written HTML Truncator, which handles the multi-block issue well.

...but in some browsers that will cause the link to render outside the parent container.

For now, the better option is to modify the script and add a class to the link's wrapping div. It currently has a class of "clearboth" which, umm... shouldn't be there. So just change that to your own class, and then style it with "text-align: right;".

I'm trying to truncate user submissions at a certain length. Most of them work perfectly. However for a few the text that should show doesn't and the truncated text does show. Then the more/less link has no effect.

There's no pattern that I can see yet and no particular character that seems to trigger it.

Check it on this link, just look for comments that look like they start halfway through and then check the source.

@JamesThanks for letting me know of this. I'm working on a new algorithm that will also be safe to use with nested tags, and I'll give special attention to this bug. Unfortunately, the cause isn't immediately obvious to me.

In the meantime, let me refer you to this comment by Karl Swedberg (http://blog.jeremymartin.name/2008/02/jtruncate-in-action.html?showComment=1205269680000#c1644222719693441130) where he mentions a couple alternatives to jTruncate.

@AnonymousWell if the truncated text is being rendered as normal, then it's going to simply push the following content lower. However, if you styled it with absolute positioning and set it's position using the bottom attribute (as opposed to top), then I should think it would do what you're describing. I'm a little crunched for time right now, but if you're not too familiar with CSS or if you run into other problems, let me know!

I love the power of this truncator (stronger than HTML Truncator, in case you are still looking for a reason for continuing) but it does have a problem that is killing it for me...

I want to truncate divs that contain break and blockquote tags, and it seems that this routine recognizes the overall length is too long to show, but truncates an internal portion of the div, i.e., rather than starting at the end of the entire item.

I have gathered some details and put them at http://www.secondpersonplural.ca/jtruncateproblems.doc

@DrewWhich font are you using? I've noticed that when I use bold-face fonts that it repaints badly if the animation length is greater than 0 (in which case the opacity is faded in). I believe that it is the changing of opacity that causes it - does that sound consistent with what you're seeing?

@RegThank you for taking the time to examine jTruncate. I'm generally pretty trusting, but I'm hesitant to open any foreign documents on my work computer - would you mind placing the information in a .txt or in html format? Sorry for the inconvenience....

I not get this to work, I guess I am doing something wrong. I have copied the jquery.jtruncate.js file to my server and entered the script code in the html page, then wrapped the text I want to show/hide in the relevant dv - is there more I should be doing?

hi, it's a great plugin! I'd like to modify it to truncate text located on another page in the same website. What do I need to change '#example 1' to make it work. I've tried a few things but none work. Needless to say that I'm new to this.

Nice plugin, but in fact i have a problem. When i use 'moreAni' and 'lessAni' options the plugin adds a newline after the truncated text, any idea how to solve this? This doesn't happen if I don't use these options

Really nice plugin! I do have a problem though in IE 8 and 9 (at least, don't have IE7 and 6 to try here). When the text in the paragraph to be truncated contains <BR />tags, the text doesn't get truncated. The links for truncating/showing appear ok, clicking it just doesn't do anything, except change the link text. The full text is always shown. The problem isn't there in FF4.

HiI have a problem when the plugin is applied to a piece of text containing multiple paragraphs, the truncation works on the first paragraph and the remaining paragraphs are shown below the truncated first paragraph and the more is underneath all, please if you have a fix let me know, thank you.

After clicking "read more" once, then truncating again by clicking "read less", and then clicking "read more" again, the part of text that was hidden is displayed on a new line. Somehow the style: inline block; is added to the "truncate_more" span class automatically...

This is only after expanding the text for the second time.

Like I said: Not a big issue, but if anyone knows hows to solve this yor help is appreciated!