html - 多行文本但完全高度应用于变换旋转

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 它将增加该 Controller 的宽度，如果我有长文本，这将在一行中.但我想要这个多行但完全高度的。

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