View Full Version : "text-overflow: ellipsis" for tables

07-19-2008, 08:18 PM
Hi, I am developing a layout for data grid with potentially long lines. These lines should never be wrapped, but trimmed instead.

Each line in the grid contains three sections:

* Text line, this one could be long
* Icon (should be aligned left, i.e. rendered immediately after the end of the text line, or the ellipsis, if the line was trimmed)
* Additional text remark, never long, 2-3 words (this should be aligned right)

The only necessary browser to support is Safari (this is iPhone web app), so I decided to use text-overflow: ellipsis.

However, the best I got was this: http://static.mikhanov.com/html/place-block.html

As you can see, the second line with the short text in it displayed correctly, however, the first one does not use the whitespace left of the "Foo and bar" to display more of the "Lorem ipsum".

How could I fix this? Thanks in advance!