<div class="tit">
金属氢化物 、配位络合物 、有机化合物催化剂 (不包括羧酸盐) [一般]
</div>
.tit {
width: 60px;
padding: 15px 8px;
min-height: 294px;
border-radius: 2px;
margin-bottom: 2px;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
writing-mode: tb-rl;
overflow: hidden;
}
改为:
<div class="tit">
<span class="spanStyle">金属氢化物 、配位络合物 、有机化合物催化剂 (不包括羧酸盐) [一般]</span>
</div>
.spanStyle{
transform-origin: left;
transform: translate(15px, 0px) rotate(90deg);
display: block;
text-align: left;
}
ps: 因为要求文字多行竖着显示 html2canvas不支持css属性 writing-mode
writing-mode: horizontal-tb(默认,文本水平方向从左到右从上到下流动) |
vertical-rl(文本垂直从右到左,从上到下流动) |
sideways-rl(文本顺指针旋转90度 从上到下 从右到左垂直流动) |
sideways-lr(文本逆顺指针旋转90度 从上到下 从左到右垂直流动) |