与单元格边框重叠的旋转内容

Question

如何防止内容与单元格边框重叠，使内容留在单元格中。我不希望设置fixed 宽度，因为内容的长度可能会有所不同。

查看示例：http://jsfiddle.net/1mmh7510/5/

CSS

 .rotate {
    height: 400px;

}

.rotate > div {
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
  transform: rotate(-180deg);
}

HTML

<table style="background-color:#e4e6ea;" border="0" cellspacing="1">
    <tbody>
    <tr class="tableheader-row-dashboard">
        <td style="background-color:white;"width="90px"> Date</td>      
        <td style="background-color:white" width="90px">Phone No</td>
        <td style="background-color:white; vertical-align: bottom;" class="rotate" width="20px"><div>Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div></td>
    </tr>
    <tr class="tablerow-rowd">
        <td class="text">06/11/2015</td>
        <td class="text">1234567890</td>
        <td class="text">X</td>
    </tr>
    </tbody>
</table>

编辑：

看起来 CSS 是不可能的。使用jQuery如何获取内容的宽度，然后将其设置为td的固定宽度？

Answer 1

结合 JS (jQuery) 和 CSS 可以实现你想要的，虽然它不是很漂亮：http://jsfiddle.net/praz92ss/6/

HTML：

<table style="background-color:#e4e6ea;" border="0" cellspacing="1">
    <tbody>
    <tr class="tableheader-row-dashboard">
        <td style="background-color:white;"width="90px"> Date</td>      
        <td style="background-color:white" width="90px">Phone No</td>
        <td style="background-color:white;vertical-align:bottom" class="rotate"><div class="content">Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div></td>
    </tr>
    <tr class="tablerow-rowd">
        <td class="text">06/11/2015</td>
        <td class="text">1234567890</td>
        <td class="text">X</td>
    </tr>
    </tbody>
</table>

基本上，你需要做三件事：

1。使用 CSS 旋转文本

.rotate > div {
  //Initially, ensure that the text will not get wider than 
  //the height of our container
  max-width:400px; 

  //Do transformation around top left corner
  transform-origin: top left;
  transform: rotate(-90deg);    
}

2。用 JS 固定宽度和高度

$(document).ready(function() {
  //Fix width of container (table-cell)
  $('.rotate').css('max-width', $('.content').width());

  //Fix width and height of content
  $('.content').css('width', $('.content').width());
  $('.content').css('height', $('.rotate').width()); 
});

3。将旋转后的文本重新定位到其容器内的正确位置

  $('.content').css('margin-bottom', -$('.rotate').width());