我为你准备了一个小提琴来展示我的问题是什么:
我需要将一些放置在 div-tag 内的文本转换为垂直显示。到目前为止没有问题。
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 对我来说应该是合适的尺寸,但设置宽度没有任何效果,正如您在小提琴中看到的那样)
关于如何实现这一目标的任何想法?