css - 单元格中的多行 - 旋转文本

Question

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

如您所见，标题字段 Test.. 敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过懒狗。 已通过 css .rotate

旋转

.rotate {
    height: 400px;
    white-space:nowrap;
    width: 40px;
}

.rotate > div {
    transform:
    translate(-4px, -5px)
    rotate(-90deg);
    width: 20px;
}

如有必要，内容应填满下一行单元格中的所有空白区域。如何解决这个问题？

示例:

Answer 1

您可以将 writing-mode 与 rotate 属性混合使用，该属性定义文本行是水平还是垂直布局以及方向。

支持

chrome、firefox 41、internet explorer 9、opera 和 safari 8 均支持

语法

选项是: 水平-tb |垂直-rl |垂直lr |侧身-rl |侧身-lr

.rotate {
    height: 400px;
    width: 40px;
}

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

<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="10px"><div>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>