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

Question

如何防止内容与单元格边框重叠，因此内容保留在单元格中。我宁愿不设置mysql_宽度，因为内容的长度可能会有所不同。

参见示例：http://jsfiddle.net/1mmh7510/5/

CSS

fixed

HTML

 .rotate {
    height: 400px;

}

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

编辑：

看起来CSS无法实现。使用jQuery如何获取内容的宽度，然后将设置固定宽度<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> ？

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