jMar"s Blog DevSmash Developer Portal

Tuesday, February 26, 2008

jTruncate - Text Truncation for jQuery

Welcome and thanks for visiting! This is the official home page for the jTruncate plugin for jQuery. In a nutshell, jTruncate provides simple yet customizable truncation for text entities in your web page.

Download

The latest version of jTruncate can be found at the following links:

Instructions/Examples

For usage instructions and working examples of the jTruncate plugin, look here.

Testers wanted!

To date I have tested jTruncate in FF2, IE6+, and Safari 3 (for windows). If you are running a browser other than what I have listed, please let me know how it performs! Due to the limited testing thus far, I am currently releasing jTruncate at version 0.8 - but it is a simple script and (until proven otherwise) I consider it to be stable.



24 comments:

Anonymous said...

In ln. 23 you could handle length==0, then one can (with empty ellipsis and details... as more-text) e.g. show something like

_my link_
details...

// if split location==0 show only
//ellipsis text -- to show the first
//word one can always use length 1
if (options.length==0) {
splitLocation = 0;
}

Kamen said...

Good work!

There is a bug though.
Look in the line:
var str2 = body.substring(splitLocation, body.length - 1);

This line effectively truncates last character.

Fix should be:
var str2 = body.substring(splitLocation);

Regards

Петр said...

Great work, nut^
when in text exists html tags before need count synbol - them tranks too,
example:
"Lorem < span color="#000" >ipsum< /span > dolor sit amet"
And the count like 10-15 - script dont work.
If you can fix this bug - its will be great.
Sorry for my lang, with best wishes from Sevastopolб Russia, Petr

Jason said...

I'm curious about lines 21 and 24.

21: var splitLocation = body.indexOf(' ', options.length);
22: if(splitLocation != -1) {
23: // truncate tip
24: var splitLocation = body.indexOf(' ', options.length);

It may be that I just need more sleep. These lines look like duplicate code and I don't think line 24 will ever change anything even taking local scoping into account.

Anonymous said...

Would I be correct in assuming that this won't work in proper XHTML? As in xhtml served as xml as opposed to the pretend xhtml that is most common (xhtml served as html). The plugin uses the html() function which if I'm not mistaken uses innerHTML and as a result will not work in an xml document.

Jack Franklin said...

Hi,

I am developing a plugin and would like to know how you compress your JS?

Thanks,

Jack Franklin

Shaid said...

Nice...i'll definitely try to implement ur menu system on my blog :D. Thank you.
Scholarships solutions

Nathan Bunney said...

Wow, exactly what I was looking for. Only one improvement request. I would love a div that spans the bottom of the message that can contain either text or an image that can be clicked to open and close the quote. I am picturing plus and minus images. It would also be cool if the ellipsis text could be clicked to expand the quote.

Anonymous said...

Does this plugin work with multi-byte UTF-8 characters?

Anonymous said...

No, it doesn't work with multi-byte characters. This is the fourth jQuery plugin to do this that I've tried, and none of them work with Japanese.

Anonymous said...

Actually, it does work with multi-byte characters, but it only splits on spaces, which don't necessarily appear in languages like Japanese and Chinese. I modified the script to just use the exact length specified if no space is found and it works.

Anonymous said...

Works perfectly in Chrome. Thanks!

Ronny Karam said...

jQuery html() gives the html content of the dom object. so body.length is actually counting the html tags too.
I think text() should be used in this case.

In addition to that, once the text is split, there's always an empty space next to the visible part once the more button is clicked.

Truncate plug-ins should be based on a certain width and height of DOM object this way the forced return, this way the second portion of the text is always truncated at the right spot

Greg said...

The examples work in English on Opera 10 beta 2, as well as Chrome 2.0.

I can already think of applications for this plug-in! Cheers for the work you've done.

Greg

bobk said...

Nice work!
Samples are working correctly in Firefox 3.5.3 on Linux

Uğur said...

nice sharing.. thanks..

Tim said...

Thanks for this, it would be good if you could chose whether to split on/after a space or just a char position.

Also, you're re-defining splitLocation on line 24 with what appears to be the same value as line 21, you could drop that I think :)

Tim

Cars Market said...

How to make it work when length = 0
...
var visibleLength = options.length + options.minTrail;
if (body.length > visibleLength) {
var splitLocation = body.indexOf(' ', options.length);
if (splitLocation != -1) {
// truncate tip
var splitLocation = body.indexOf(' ', options.length);
if (visibleLength == 0) splitLocation = 0;
var str1 = body.substring(0, splitLocation);

....

Max Roald Eckardt said...

nice piece, what's your license for it?

Anonymous said...

Hi there!

I'm using jTruncate for a german site and I was wondering how to use html entities in the jTruncate function? I'm trying to place 'Zurück' in the read less text.

I hope someone has a hint :)

~ Dorien

cress said...

Great code, love the way it looks in general and am planning to use it and credit you in my source.

Two issues I have though...

A) When using justified text, on reveal, text doesnt properly justify leaving massive spaces where normally words should be along the top line.

B) Using 3 short lines of left aligned text, on reveal, first word wont jump back up to top line, stays at the beginning of the bottom line of text and where it should be, at the top left, there is a white gap.

Can you assist?

I am VERY new to jQuery and coding in general, often I dont undertand coding terminology or instruction, so please explain things in simple terms for me :)

Cress

Swanny said...

I'm using this in a mobile application and it works great on iPhone and iPad thus far.

I did have an issue when trying to get the more/less link to use jquery button UI. I call the following code after $("myelement").jTruncate();

$("a.truncate_more_link").button();

The button UI embeds a span element inside the link, which the jTruncate plugin removes when switching from moreText to lessText (and vice versa).

So, rather than replacing all the text within the moreLink, I replaced the following lines:

moreLink.text(options.lessText);
&
moreLink.text(options.moreText);


with these:

moreLink.html(moreLink.html().replace(options.moreText, options.lessText));
&
moreLink.html(moreLink.html().replace(options.lessText, options.moreText));


This will replace the text, leaving any remaining HTML untouched.

Anonymous said...

how to truncate multiple paragraphs???

iphone 6 said...

I like the helpful information you provide for your articles. I’ll bookmark your weblog and check again here frequently. I am quite sure I’ll learn many new stuff proper here! Best of luck for the following!
site iphone 6