我想创建div,其中应该有这样的文本:
但是我无法正确定位文本。因为使用transform: rotate(-90deg);
,所以我对left
,right
,top
和bottom
完全感到困惑。
我的主要问题是为什么文本有时会中断,为什么会有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值(保持不变)和百分比值(应使其完全响应)。关于宽度,唯一的条件是它足够高,不会被剪切,因此应该容易找到一个好的值。