16

I'm trying to use jquery to write a fast function that calculates the pixel width of a string on a html page, then truncates the string until it reaches an ideal pixel width...

However it's not working (the text doesn't truncate)...

Here is the code I have:

    function constrain(text, original, ideal_width){

    var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text-1));
        $('.temp_item').html(text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + '&hellip;');
    } else {
        return text;
    }
}

Here's how I'm calling it from the page:

    $('.service_link span:odd').each(function(){
    var item_text = $(this).text();
    var original_length = item_text.length;
    var constrained = constrain(item_text, original_length,175);
    $(this).html(constrained);
});

Any ideas on what I'm doing wrong? If there is a way to do it faster (ie bubble sort), that would be great too.

Thanks!

novon
  • 241
  • 2
  • 4
  • 11

5 Answers5

34

Rather than hacking this together with script, why not just use CSS to specify the width of the element you're putting this string into? You can use text-overflow to tell the browser it should truncate with an ellipsis.

.truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

text-overflow is a CSS3 declaration, but is supported in IE 6+, WebKit 312.3+ (Safari 1.3+/Chrome), and Opera 9+ (versions < 10.7 need the -o-text-overflow declaration).

Note that this was unimplemented in Firefox until 7.0, and under 4% of Firefox users are still using old versions (mostly 3.6). Your text will still be truncated in older versions, there just won't be an ellipsis rendered. If you're concerned about this small group of users, you can use this jQuery plugin, which does nothing in IE/WebKit/Opera/Firefox ≥ 7, but will emulate text-overflow in Firefox ≤ 6.

josh3736
  • 139,160
  • 33
  • 216
  • 263
3

On this line:

smaller_text = smaller_text.substr(0, (smaller_text-1));

you may have intended

smaller_text = smaller_text.substr(0, (smaller_text.length-1));

Does that solve the problem?

Dan Davies Brackett
  • 9,811
  • 2
  • 32
  • 54
0

The function takes the text to check, the ideal_width in pixel and the class name for the css. If the ideal_width is less than the text width it truncs and adds the hellip otherwise it returns the text unmodified. Simple and works! :-)

function constrain(text, ideal_width, className){

    var temp_item = ('<span class="'+className+'_hide" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.'+className+'_hide').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    if (item_width>ideal_width){
        while (item_width > ideal) {
            smaller_text = smaller_text.substr(0, (smaller_text.length-1));
            $('.'+className+'_hide').html(smaller_text);
            item_width = $('span.'+className+'_hide').width();
        }
        smaller_text = smaller_text + '&hellip;'
    }
    $('span.'+className+'_hide').remove();
    return smaller_text;
}
Angelo Nodari
  • 365
  • 7
  • 14
0

If you have the text, and know the size you want, why not just use substr?

I did something similar with

$('#history-1').text( $('#history-1').text().trim().substr(0,32) + "..." )
doubtingben
  • 1
  • 1
    Unless you're using a fixed-width font like Courier, you can't guarantee that `n` characters will be `x` pixels wide. (For example, an m is much wider than an l.) And really, even if you are trying to use a fixed-width font, you still can't *guarantee* the pixel width of each character due to differences between platforms, browser settings, and so forth. – josh3736 Nov 19 '10 at 13:45
0

Thanks, I got it working - but it only works on the first item and stops, does this have to do with the way I'm declaring variables?

here's the current code:

    function constrain(text, original, ideal_width){

    var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text.length-1));
        $('.temp_item').html(smaller_text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + '&hellip;');
    } else {
        return text;
    }
}
novon
  • 241
  • 2
  • 4
  • 11
  • I don't see anything obviously wrong with declarations that'd cause it to fail on subsequent items. You're sure your selector is applying to multiple items? (also, please don't forget to mark my answer as a solution if you think it deserves it =) ) – Dan Davies Brackett May 22 '09 at 00:36
  • It works fast in Safari - but takes too long in firefox... any way to make the while statement more efficient? – novon May 22 '09 at 00:39
  • BTW - I got it working on all by moving the : var temp_item = (''); $(temp_item).appendTo('body'); To the outside of the function... but the speed issue in firefox and slower browsers still lingers! Thanks for the help so far – novon May 22 '09 at 00:40