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

Answer 2

添加到您的.rotate類

overflow: hidden; 
    text-overflow: ellipsis; 

更新demo here

你也需要調整.rotate寬度來實現這一目標。還有一個建議，既然你已經給它們分配了一個類名，爲什麼不把它放在css中而不是在線樣式中呢？