Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

enter image description here

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)

like image 297
Jade Hamel Avatar asked Jun 19 '13 18:06

Jade Hamel


2 Answers

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.

like image 100
painotpi Avatar answered Sep 25 '22 10:09

painotpi


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

like image 40
Anto Avatar answered Sep 23 '22 10:09

Anto