html - 行跨度单元格内的旋转文本和自动换行

Question

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

详细信息:我有一个单独的文本，我 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 设置为 8 像素。虽然，我很确定，我会在一行中得到整个文本，但它被自动换行成两行并产生非常难看的效果:

看来，有足够的空间将其写在一行中。 44px div 的宽度(由于旋转，现在变为高度)加上 2 x 8px 填充只有 60px，这仍然是非常非常少比单元格的高度设置为 148 px。那么，为什么它被自动换行？

当我使用 Chrome 开发者工具突出显示单元格(图片第二个)时，在我看来，浏览器正在向单元格的内容添加巨大的高度填充，完全忽略 CSS 设置的填充 (8px) .还是有其他我看不到的原因？

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

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

Answer 1

防止在 CSS 中换行只是:

white-space: nowrap;

(其他 values 也可能有用。)