Question

我正在查找表格中的文字溢出，其中th标记中的文字被转换为90度。

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

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

问题是文本溢出从单元格的宽度确定String的长度，但在我的情况下，它必须是高度。有谁知道解决这个问题？

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');

Answer 2

将此添加到.rotate类

    overflow: hidden; 
    text-overflow: ellipsis;

更新了demo here

此外，您需要调整.rotate宽度才能实现此目的。还有一个建议，因为你已经为它们分配了一个类名，为什么不把宽度放在css而不是in-line style？

CSS3文本溢出在90度旋转表标题上

2 个答案: