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.



45 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

Suhana shaly said...

I ride a road bike with a kickstand and a bell :) You can do whatever you want with your bike! Just I hope you are wearing a helmet… please say yes!Clipping Path service

Makayla Charleston said...

I read your post carefully and learn many new things. Your post are very effective.
image manipulation

facebook entrar said...

There must fight fierce new look won another young wife scrapes all the people entrar en facebook , facebook entrar a mi cuenta , entrar no facebook , girls go games , facebook entrar perfil , facebook entrar mi cuenta , facebook entrar login

Garage Door San Diego said...

Thanks for sharing this. I enjoy reading it. Keep it up!

aliya seen said...

I love reading and writing books that's why paraphrase service is perfect for me. This gave me great chance to learn new things.

Mamta Singh said...

Adult Backlinks If You want to promote your Adult website Worldwide and Receive Free Adult Traffic for a Life time? Then you are in the right place.
Dofollow Backlinks PR7 To PR2 Blog Comment Backlinks with Express Delivery.. Try Our Service Once. Please Contact Me http://www.fiverr.com/conversations/adultlinkbuild …
High PR Blog Comments PR7 To PR2 Blog Comment Backlinks with Express Delivery.. Try Our Service Once. Please Contact Me http://www.fiverr.com/conversations/adultlinkbuild …

Badan Singh said...

עיצוב לוגו עיצוב לוגו בפרש פתרונות שיווק זה לא רק עיצוב לוגו,אלא חשיבה שיווקית בעיצוב לוגו לעסקים, עיצוב לוגו לחברות, עיצוב לוגו לעסק חדש, עיצוב לוגו לעסק בהקמה, עיצוב לוגו למשרד, עיצוב לוגו מקצועי

aliya seen said...

The mba assignment writing service is very important for students who are in need to write perfect statement for admission or job.

Manndola said...

Manndola.com is online retail store, which has a finest range of SalwarSuit, Sarees, and Accessories. We do express shipping all around the globe. We make delivery in USA, UK, Canada, India, UAE, Mauritius, Australia, etc. Manndola is starting Valentine Sale, Shop now manndola.com and get 14% + 14% discount ( not applicable on discounted products). Buy from Ethnic Wear Online store and get fabulous ethnic wear at 50 % discounts*.

Badan Singh said...

buffet catering cheshire ​The Online buffet ordering Service. We’ll be your dependable and reliable catering services provider for your next event for all your catering needs. We cater for all event catering needs. Corporate, business, private, wedding, Party Catering, office, BBQ, birthdays, or any buffet event catering Party for both hot and cold Buffets. We have experience in both hot and cold buffet services. We cover areas in the North West including Manchester, Oldham, Liverpool, Salford, South East, Cheshire, Preston, Lancashire, Birmingham, Tameside and Ashton under Lyne and London...

Badan Singh said...

mallorca escort Welcome To Our Ibiza Escorts Agency. Palma Babes would like to give you a warm welcome to our very established and trusted escorting agency which is founded in the very beautiful and warm country of Spain, we believe that Palma Babes differentiates from the rest of the competition and we do believe that you will find some of the most hottest Ibiza escorts at our agency...

skrotpræmie said...

Such intelligent work on the subject and ideal way of writing here. I am really impressed! This post is a helpful overview of the particular topic and very actionable. Interesting approach..Explore the real Thailand. Real expert travel tips and insights on Thailand to maximize your trip experience. Transportation In Bangkok. Thailand іѕ а perfect place for vacation. There are a great deal of enjoyable things that уоu can dо in Thailand. Thailand аlso hаѕ numerous great tourist points оf interest such as Wat Arun ( Temple of Dawn), Floating Market, and Wat P...

Badan Singh said...

hairy pussy Erroticum nude pics in galleries with naked hot sexy babes. Watch unlimited, high quality HD porn, featuring hot pussy, sexy girls. On erroticum.com find the most beautiful, sexy and natural girls in nude modeling.

Badan Singh said...

earth day 2016 kids activity projects Earth day 2016 facts,earth day 2016 events celebration usa canada,earth day 2016 slogans quotes songs,earth day 2016 kids activity projects.

Badan Singh said...

​gay live cam LeonBoys is gay live cam models streaming direct to you from their homes around the world. Sexy webcam online strip shows, sex shows, fulfill your fantasy!

Badan Singh said...

baby photographer Central London-based, specialised in children's and family portrait photography, baby photography, newborn photography and pregnancy photography.

Badan Singh said...

hd porno Turkey's largest, was watching a porn site with the most content. There are appropriate to each sex porn videos on the site.

Badan Singh said...

​porno izle Bedava porno video, online porno film izle, ucretsiz porno klipler, canli porno videolar.

Fashion Hubs said...

great article some of these venues I have never heard of will go check them out!! Thanks!!

ElectricAlan said...

Cool plugin, was just what I was looking for. I found an issue though, when it first reveals the hidden text, that span has display 'inline' on it, but if I re-hide and display the text again, it has display 'inline-block' instead, making the text break onto a new line instead of displaying as originally intended. This should be simple enough to correct, I haven't looked through the source but at a guess on reveal you might not be restoring the display property correctly.

ElectricAlan said...

I also noticed an inconsistency in animation, the first time I show text, it fades in, after that the subsequent hide and show animations slide in and out.

I still like your plugin tho