How do I overflow text to the left in a table?

Question

I have a table with fixed layout. On overflow, the contents of cells should clip from the left instead of the right. That is, if the width of the TD is less than the width of the text, the cell below should display "67890" instead of "12345".

This needs to work in IE7+ at minimum. Is there a way to do this in css without any JavaScript?

<table style="table-layout:fixed">
  <tr>
    <TD>
      12334567890
   </TD>
 </tr>
</table>

possible duplicate of [Overflow to left instead of right](http://stackoverflow.com/questions/218065/overflow-to-left-instead-of-right) — mbillard, Jun 08 '10 at 00:21

score 5 · Accepted Answer · answered Jun 08 '10 at 00:04

5

you could use:

direction:rtl;

answered Jun 08 '10 at 00:04

Dan Heberden

10,990
3
33
29

1

I have to admit I thought of this, but his question was a bit confusing since he said the line below should be "67890" which is still reading left-to-right. Better wording on his part could help here. – animuson Jun 08 '10 at 00:09
This will work as long as you don't have punctuation in the cells. I think that text like "This is a sentence!" would look like "!This is a sentence". Otherwise, this solution works. – mbillard Jun 08 '10 at 00:13
adding direction:rtl to the TD did the job. Thanks. – remack Jun 08 '10 at 00:15
Yeah, it doesn't seem like the most elegant solution for the actual need. I think either manipulating the data server side or client-side would be better so you can display X amount of characters at all times. – Dan Heberden Jun 08 '10 at 00:43

score 1 · Answer 2 · answered Jun 08 '10 at 00:08

1

I haven´t tried it, but you could try text-align:right or wrap the contents in a div and float that right.

answered Jun 08 '10 at 00:08

jeroen

91,079
21
114
132

score 0 · Answer 3 · answered Jun 08 '10 at 00:06

You can use the CSS3 property word-wrap: break-word but there's no way to control where it will break the word. It will fit whatever it can on the line and then break it down to the next, it won't keep the lines of equal length.

There is also the <wbr> tag but I've never used or experimented with it, so I can't really tell you how to use it.

How do I overflow text to the left in a table?

3 Answers3

Linked