行内细胞和自动换行内的旋转文本

Question

摘要：我的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，这仍然远远小于设置为{{1}的单元格高度}。那么，为什么它被包装好呢？

当我使用Chrome开发者工具突出显示单元格（图像上的第二个）时，在我看来，浏览器正在为单元格的内容添加巨大的高度填充，完全忽略了CSS集填充（148 px）。还是有其他原因，我只是看不到？

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

BTW：测试和示例都是在Chrome中制作的，但在IE和Firefox中的效果完全相同。

Answer 1

防止在CSS中包装只是：

manager.requestSerializer = [AFJSONRequestSerializer serializer];

（其他values也可能有用。）