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

Question

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

3

如何防止内容覆盖单元格边框，使内容保留在单元格中。我希望不设置固定的宽度，因为内容的长度可能会变化。

参考示例：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 的固定宽度？

- I'll-Be-Back

可能是重复问题：https://dev59.com/P2Uo5IYBdhLWcg3wvBiX - gummbahla

你为什么要旋转-180度并应用写入模式，而不是旋转-90度呢？使用transform-origin: top left; transform: rotate(-90deg);至少可以使文本保持在框内。据我所知，要使框完美适配是不可能的，除非使用JS。 - gummbahla

@gummbahla 哦，我明白了。在这种情况下，我需要在JS中做什么？ - I'll-Be-Back

@I'll-Be-Back 这个能解决你的问题吗？http://jsfiddle.net/1mmh7510/8/ 请告诉我，谢谢。 - GibboK

@GibboK 不，你包括了固定宽度。这并没有帮助，因为每个字段的内容长度都不同，就像这样http://jsfiddle.net/1mmh7510/9/ - 自动宽度是最好的选择。 - I'll-Be-Back

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gummbahla · Accepted Answer

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