Using a jQuery selector and each

Question

I'm trying to truncate a string to a certain pixel width. The best way I discovered is through using jQuery's selector and possibly using each on the results. My attempt is at http://jsbin.com/umawi/edit. I haven't done much jQuery at all, and any help is appreciated.

Thanks

Edit: I need to do this for inline elements and not block elements.

cletus · Accepted Answer · 2009-10-18 03:04:28Z

3

You don't need jquery for this.

<div class="truncate">Truncate some test</div>

with:

div.truncate { width: 100px; white-space: nowrap; overflow: hidden; }

as just one simple example. You can even add:

text-overflow: ellipsis;

but support is limited.

It's also worth noting that this only works (well) on block display elements, not inline and not table cells so if this is in a table you'll need to do:

<td><div>...</div></td>

because otherwise you won't get the desired results.

answered Oct 18, 2009 at 3:04

cletus

627k169 gold badges922 silver badges945 bronze badges

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

3 Comments

Simon Over a year ago

Thanks a bunch. I tried this before, but didn't know I needed the nowrap and hidden overflow.

Simon Over a year ago

What if I want to do this to inline elements? Say, a part of an unordered list? Is there a better way to do this?

cletus Over a year ago

List elements aren't inline. But no you can't apply overflow to inline (well you can, it just won't do what you want).

Collectives™ on Stack Overflow

Using a jQuery selector and each

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related