html - 向右放置一个旋转的跨度

Question

我想创建一个 div，其中应该有这样的文本:

但我无法正确定位文本。因为我使用了 transform: rotate(-90deg);，所以我对 left、right、top 和 底部。

我的主要问题是为什么文本有时会中断，为什么会有像 right: -32px; 这样的东西，并且是否有一个很好的方法来保持所有响应(各种文本长度，各种长度的关于 d block )。我添加了一个屏幕截图以显示我想在哪个上下文中使用它:

HTML:

<div class="chart-block" id="block2" style="height: 90%; left: 120px;">
   <div>
      <span>The Cup of tea</span>
   </div>
</div>

CSS:

.chart-block {
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 40px;
    background-color: #ef0707;
}

.chart-block > div {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
} 

Answer 1

也许这就是你想要的

CSS(只有span，其他不变)

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
    width: 200px;
    left: 50%;
    bottom: 0px;
    position: absolute;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
} 

updated demo

请注意，唯一的固定值是跨度的宽度。其余的是 0 值(保持不变)和百分比值(应该使其完全响应)。关于宽度，只要高到文字不被裁剪就行，应该很容易找到一个好的值。