jQuery Trim String by Width

Question

I want to trim a string down to a particular pixel width so that it can properly fit in a container. It will be similar to substring, except that I am trimming based on pixel width as opposed to number of characters. is there a built in function for this?

What happens when the pixel width occurs within the space of a letter (say half-way through an 'm')? Do you expand the string to include the full 'm', or round it down to omit the 'm'? Oh, and no, there isn't a built in JS function for this, though CSS does it quite easily. — David Thomas
– David Thomas, Commented Jul 27, 2011 at 17:34
Just out of curiosity, what's your application for this? You could easily just let the string overflow it's container but use overflow: hidden. — Gordon Gustafson
– Gordon Gustafson, Commented Jul 27, 2011 at 17:34
@CrazyJugglerDrummer: I am aware of the overflow: hidden property. however, it is not sufficient in this case because I am adding ellipsis to an overflowing word and text-overflow: ellipsis is not supported in mozilla — well actually
– well actually, Commented Jul 27, 2011 at 17:37

David Rettenbacher · Accepted Answer · 2011-07-27 17:38:50Z

3

Maybe this is what you're looking for:
jQuery Text Overflow plugin

Lg
warappa

answered Jul 27, 2011 at 17:38

David Rettenbacher

5,1202 gold badges41 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mrchief · Accepted Answer · 2011-07-27 17:58:07Z

0

You can do it via css: text-overflow: clip;

Note: This is not supported in FF < 7. Every other browser including IE6 supports it.

Try this:

function trimByPixel(str, width) {
    var spn = $('<span style="visibility:hidden"></span>').text(str).appendTo('body');
    var txt = str;
    while (spn.width() > width) { txt = txt.slice(0, -1); spn.text(txt + "..."); }
    return txt;
}

edited Jul 27, 2011 at 17:58

answered Jul 27, 2011 at 17:37

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

3 Comments

well actually Over a year ago

I know. that is not what I'm after.

Gordon Gustafson Over a year ago

FF < 7? I just upgraded to 5.0.1, so I don't think there's even a beta for Firefox 6 yet... :D

Mrchief Over a year ago

:) You can get FF8 alpha release if you go to nightly builds: nightly.mozilla.org

Colin O'Dell · Accepted Answer · 2011-07-27 17:39:35Z

0

CSS might be the easiest/best option, especially if you're trying to keep text confined to an area. Check out both word-wrap and text-overflow, as they might be v

answered Jul 27, 2011 at 17:39

Colin O'Dell

8,7178 gold badges41 silver badges75 bronze badges

1 Comment

well actually Over a year ago

I already know about those and they are not what I'm looking for.

Collectives™ on Stack Overflow

jQuery Trim String by Width

3 Answers 3

Comments

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Linked

Related