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.
