How do I get my text on a single line when I rotate in CSS

Question

I'm rotating a Cell with

height: 500px;
width: 20px;
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-o-transform:rotate(270deg);
transform:rotate(270deg);

But when my string contain more than 1 word, it's going on multi-line (like the picture below)

Answer 1

If what I have figured out is correct, try this,

add a white-space: nowrap; to your cell.

jsfiddle example here, read about white-space here.

Answer 2

Did you try the white-space property ?

white-space: nowrap; /* or pre */

nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

pre

Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.

Simple example over here