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

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