Rotated text inside rowspaned cell and word wrap

Question

Summary: My 90-degrees rotated text, put into rowspaned cell, is word-wrapped to two lines, though in my opinion, there is enough space in cell to write it in a single line. Is this some kind of browsers' bug?

Details: I have a single-one text, that I 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 */
}

I then put it into a table cell, rowspaned to four rows:

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

Browser (Chrome) renders div itself as 44px x 40 px, while table cell's as 61px x 148px with padding set to 8px. Though, I was pretty sure, that I'll get entire text in a single line, it is word-wrapped to two lines and produces quite ugly effect:

It seems, that there is enough space to write it in a single line. 44px div's width (which now becomes height, due to rotation) plus 2 x 8px padding is only 60px, which is still far, far less than cell's height set to 148 px. Why, then, it is being word-wrapped?

When I highlight cell (second on image) with Chrome Developers Tools, it seems to me, that browser is adding an enormous height padding to cell's content, completely ignoring CSS-set padding (8px). Or is there any other reason, that I just don't see?

I tried to "fix" this, by changing padding to 0 px or even negative value, but without any luck. Is there any way, that I can force browser to render this text in a single line, if there is space enough to fit it?

BTW: Tests and examples are made in Chrome, but effect in IE and Firefox is exactly the same.

Answer 1

Preventing wrapping in CSS is just:

white-space: nowrap;

(Other values may also be useful.)