CSS3 text-overflow on a 90 degree rotated table heading

Question

I'm looking for a text overflow in a table where the text in a th tag is transformed 90 degrees.

The text should be cut with text-overflow: ellipsis if it's too long for the cell. Here's an example what my table looks like:

http://jsfiddle.net/EHVtR/

.positionFix {
  height: 25px;
  padding: 75px 0 15px 0;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
}

.rotate {
  overflow: visible;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -ms-transform: rotate(-90deg);
}

<table border="1">
  <tr>
    <th class="positionFix">
      <div class="rotate" style="width:30px;">item 1</div>
    </th>
    <th class="positionFix">
      <div class="rotate" style="width:30px;">item 2 more text</div>
    </th>
    <th class="positionFix">
      <div class="rotate" style="width:30px;">item 3</div>
    </th>
  </tr>
  <tr>
    <td>entry 1</td>
    <td>entry 2</td>
    <td>entry 3</td>
  </tr>
</table>

The problem is that the text overflow determines the length of the String from the width of the cell but in my case it must be the height. Does anyone know a fix for that ?

Answer 1

The solution is that I've added another div which contains the text. then I take the height from the tr element and put it as the width of the text div. This will calculate the correct text overflow length.

here the corrected version http://jsfiddle.net/rpQew/

the new css class:

.overflow{
        top:5px;
        position:relative;
        display:inline-block;
        width: 150px;
        text-align: left;
        padding-left: 5px;
        padding-right: 5px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

the table:

<table border="1">
<tr id="tableRow">
    <th class="positionFix"><div class="rotate"><div class="overflow">item 1 Test text text-overflow test</div></div></th>
    <th class="positionFix"><div class="rotate"><div class="overflow">item 2 more text foo bar faz</div></div></th>
    <th class="positionFix"><div class="rotate"><div class="overflow">item 3 foo bar foo bar foo bar foo bar foo</div></div></th>
</tr>
<tr>
    <td>entry 1</td>
    <td>entry 2</td>
    <td>entry 3</td>
</tr>
</table>

and the js:

var rowHeight = $('#tableRow').height();
$('.overflow').width(rowHeight+'px');

Answer 2

Add this to your .rotate class

    overflow: hidden; 
    text-overflow: ellipsis;

Updated demo here

Also you need to adjust your .rotate width to achieve this. And one more suggestion, since you already assigned a class name to them, why not put the width in css instead of in-line style?