Question

I’m trying to create a universal function that I can call from multiple places to truncate long text recursively to fit a predefined pixel width – using jquery.

Here is the code…

function constrain(text, original, ideal_width){

    var ideal = parseInt(ideal_width);

    $('span.temp_item').remove();
    var temp_item = ('<span class="temp_item" style="display:none">'+ text +'</span>');
    var item_length = text.length; 
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();

    if (item_width > ideal) {
        var smaller_text = text.substr(0, (item_length-1));
        return constrain(smaller_text, original);
    } else if (item_length != original) {
        return (text + '&hellip;');
    } else if (item_length == original) {
        return text;
    }
}

If I run the function like this:

    $('.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);
});

The text doesn’t truncate. I also tried the 175 without the quotes.

If I define var ideal = 175; inside the function, then it works. Why is passing 175 to the function not working? I did a parseInt on it in case it was a string.

Also – this truncate code run a bit slow on older machines – any tips for speeding it up?

Thanks!

Answer 1

Great stuff here. I used the function by Phil Carter. I just wanted the new string with the &hellip to be truncated at the same width as the rest.

I just quickly added another temp-width lookup and recursive call. Could use some cleanup but it works.
here’s the new while:

while(item_width > ideal) {                     
            var smaller_text = text.substr(0, (item_length-1));
            return constrain(smaller_text, original, ideal_width, counter);
    } 

    if (item_length != original) {
            new_text=text+'…';
            $('span.temp_item').remove();
            var temp_item = ('<span class="temp_item" style="display:none">'+ new_text +'</span>');
            $(temp_item).appendTo('body');
            var item_width_new = $('span.temp_item').width();
        if(item_width_new>ideal){
            var smaller_text = text.substr(0, (item_length-1));
            return constrain(smaller_text, original, ideal_width, counter);         
        }
        else {
            return new_text;
        }
    } else if (item_length == original) {
            return text;
    }
}