Управление размерами CSS / позиционирование повернутого текста

Question

У меня есть HTML-код как

<div class="fl">
<div class="titleTextV">My ABC</div>
</div>

Теперь я применил CSS для поворота текста как;

.titleTextV{
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size:1.3em;
    background:#999;
    height:100%;
}

Я хочу, чтобы этот класс titleTextV охватывал всю высоту егоконтейнер 100%, без значения px и будет помещен внутрь, но в настоящее время текст перемещается из поля.

Answer 1

Если вы пользователь jQuery, попробуйте это:

$('.fl').height($('.titleTextV').width());

И добавьте display: inline-block; к вашему titleTextV классу.

Живой пример в jsFiddle: