CODEWITHSUNDEEP
csstransform
Derek Henderson
Derek Henderson

Reputation: 9706

Relative width of rotated element

I have an anchor (a) that has height: 40% and width: 20px. Its child element is a span to which I have applied transform: rotate(90deg) and transform-origin: left bottom.

I want the dimensions of the span to be the same as the parent, so I specify width: 100%. However, when rotated the span loses those dimensions. I can specify the text width with a hardcoded pixel value, but I want this span to be flexible, relative to the available screen size.

Fiddle demonstrating this issue

I know I can set the width of the span with JavaScript, but I want to avoid having to do so if at all possible. Does anyone know of a CSS-only solution to this?

Upvotes: 0

Views: 194

Answers (1)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Now define white-space: nowrap;

.pulltab > a > span {white-space: nowrap;}

Demo

Upvotes: 1

Related Questions