Truncated text in a variable-width container

Question

I want to have a two-column list of items where the right column has a fixed width, and the left column is determined by the window size, with its text truncated:

+----------------------+-----------+
|Variable width text...|Fixed width|
+----------------------+-----------+

All of the examples I've found on how to do truncated text in HTML/CSS use a fixed width for the truncated text, so they don't work for my variable-width case. I usually end up with the left text not being truncated, causing the element to be wider than it should be.

I'd include sample code, but I've tried so many different things I don't know which wrong approach to post :)

This is for a WebView in a desktop application, so I only need it to work with the latest WebKit.

Truncated as in word wrap or really just gone?

PeeHaa
– PeeHaa

2012-08-10 16:18:36 +00:00
Commented Aug 10, 2012 at 16:18 — PeeHaa
– PeeHaa, Commented Aug 10, 2012 at 16:18
And if you want the three dots, google "jquery ellipsis"

Barmar
– Barmar

2012-08-10 16:26:42 +00:00
Commented Aug 10, 2012 at 16:26 — Barmar
– Barmar, Commented Aug 10, 2012 at 16:26
Yes, I'm going for the ellipsis.

Uncommon
– Uncommon

2012-08-11 04:18:58 +00:00
Commented Aug 11, 2012 at 4:18 — Uncommon
– Uncommon, Commented Aug 11, 2012 at 4:18

PeeHaa · Accepted Answer · 2012-08-10 16:23:01Z

4

If you really want to text to be truncated you could do something like: http://jsfiddle.net/fju9q/2/

Which uses 2 divs. The right div is floated and the left div uses overflow: hidden and white-space: nowrap; to make sure the text is truncated.

answered Aug 10, 2012 at 16:23

PeeHaa

73.1k60 gold badges195 silver badges264 bronze badges

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

2 Comments

Uncommon Over a year ago

That gets me most of the way there. My next problem is that this is inside a table, and the td seems to be calculating its width based on the pre-truncated text - jsfiddle.net/Q3AbF

Uncommon Over a year ago

Aha, I've got it now. I just needed table-layout: fixed. Thanks!

Collectives™ on Stack Overflow

Truncated text in a variable-width container

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related