html - 90 度旋转表格标题上的 CSS3 文本溢出

Question

我正在寻找表格中的文本溢出，其中 th 标记中的文本被转换了 90 度。

如果文本对于单元格而言太长，则应使用 text-overflow: ellipsis 进行剪切。这是我的表格的示例:

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>

问题是文本溢出根据单元格的宽度确定字符串的长度，但在我的例子中它必须是高度。有谁知道解决办法吗？

Answer 1

解决方案是我添加了另一个包含文本的 div。然后我从 tr 元素中获取高度并将其作为文本 div 的宽度。这将计算出正确的文本溢出长度。

这里是修改后的版本 http://jsfiddle.net/rpQew/

新的 CSS 类:

.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;
    }

表格:

<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>

和 js:

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