我为你准备了一个小提琴来展示我的问题:
我需要将一些文本放在div标签内,以便它垂直显示。 到目前为止没问题。
HTML:
<div class="board">
<div class="boardheading">
<div class="verticalText">AVeryLongLongLongLongWord</div>
</div>
<div class="boardelement">
Some larger content here<br>
Some larger content here<br>
Some larger content here<br>
</div>
</div>
相关CSS:
div .boardheading {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 5px;
border-style: solid;
overflow: visible;
background: blue;
/*See here: I want to have a fixed width and an automatically calculated height*/
width: 20px;
}
div .verticalText {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
但是正如你所看到的,div的高度并不适合他的内容。宽度也没有。我希望宽度尽可能小(20px对我来说应该是合适的尺寸,但是设置宽度没有任何影响,就像你在小提琴中看到的那样)
有关如何达到此目标的任何想法?
答案 0 :(得分:0)
这应该让你朝着正确的方向前进。
div .verticalText {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
background: blue;
padding: 5px;
border-style: solid;
}