多行文本但在变换旋转中应用了完全高度

Question

demo

演示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它会增加该控制器的宽度，如果我有长文本，它将在一行中。但我想要这条多线但完全高度的。

Answer 1

好的，THIS

怎么样？

.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);
}