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



但是我无法正确定位文本。因为使用transform: rotate(-90deg);,所以我对leftrighttopbottom完全感到困惑。

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



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

最佳答案

也许这就是你想要的

CSS(仅跨度,其余部分保持不变)

.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值(保持不变)和百分比值(应使其完全响应)。关于宽度,唯一的条件是它足够高,不会被剪切,因此应该容易找到一个好的值。

10-05 20:53
查看更多