html - 複数行のテキストですが、変換回転で完全に高さが適用されます

Question

デモ

デモ html

<div class="controller">
<div><a href="#buttton-1">Special Offer</a></div>
</div>

デモCSS

.controller{
    width: 55px;
    height: 216px;
    background: #000;
    border-radius: 0 19px 19px 0;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
.controller div{
    transform: rotate(90deg);

}

私はそれを使用white-space: nowrap;し.controller divてそのコントローラーの幅を増やし、長いテキストがある場合、これは1行になります。しかし、私はこのマルチラインが欲しいのですが、このように完全に高くなっています。

Answer 1

わかりました、これはどう ですか

.controller{  
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 55px ! important;
height: 215px;
background: #000;
border-radius: 0 19px 19px 0;
text-align: center;
vertical-align: middle;
display: block;
float:left;
position:relative;
margin-right: 10px;
}
.controller div{
position: relative;
top: 90px;
left: -70px;
width: 190px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}