行跨单元格内的旋转文本和自动换行答案

【问题标题】：Rotated text inside rowspaned cell and word wrap行跨单元格内的旋转文本和自动换行
【发布时间】：2014-07-02 14:36:23
【问题描述】：

总结： 我的 90 度旋转文本，放入跨行单元格中，自动换行为两行，但在我看来，单元格中有足够的空间将其写在一行中.这是某种浏览器的错误吗？

详情：我有一个单字，我rotate 90 degrees：

.rotate-90-degrees
{
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
    -ms-transform: rotate(-90.0deg);  /* IE9+ */
    -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
    transform: rotate(-90.0deg);  /* Standard */
}

然后我把它放到一个表格单元格中，行跨度为四行：

<td rowspan="4">                            
    <div class="rotate-90-degrees">
        Quest. no 1
    </div>
</td>

浏览器 (Chrome) 将 div 本身呈现为 44px x 40 px，而表格单元格呈现为 61px x 148px，padding 设置为 8px。虽然，我很确定，我会在一行中获得整个文本，但它会自动换行为两行，并且会产生非常丑陋的效果：

似乎有足够的空间将其写在一行中。 44px div 的宽度（现在变为高度，由于旋转）加上 2 x 8px 填充只有 60px，这仍然远远小于单元格的高度设置为 148 px。那么，为什么会被自动换行呢？

当我使用 Chrome 开发人员工具突出显示单元格（图片上的第二个）时，在我看来，该浏览器正在为单元格的内容添加巨大的高度填充，完全忽略了 CSS 设置的填充 (8px)。还是有什么其他原因，我只是没看到？

我试图通过将填充更改为0 px 甚至负值来“修复”这个问题，但没有任何运气。如果有足够的空间容纳它，有什么方法可以强制浏览器在一行中呈现此文本？

顺便说一句： 在 Chrome 中进行了测试和示例，但在 IE 和 Firefox 中的效果完全一样。

【问题讨论】：

标签： html css rotation word-wrap

【解决方案1】：

防止在 CSS 中换行只是：

white-space: nowrap;

（其他values 也可能有用。）

【讨论】：