html2canvas 不支持writing-mode: tb-rl怎么办

31 阅读1分钟
<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度 从上到下 从左到右垂直流动) |