CSS Rotate Text Vertical - Extra Space on both sides

Question

When I rotate and inline layer with TEXT, it adds extra space (width of large text) on the rotation, I dont want to fix. What is the best way to avoid extra space (width of

Answer 1

Very simple answer

  

    

      
Text might be on left side
      
Text might be on left side
    
  




.fixed-left{
    display: block;
    position: fixed;
    width: 40px;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 99999;
    height: 100%;
 }
 .fixed-left-inner{
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
 }
 .fixed-left-item{
    display: block;
    transform: translate(0,50%) rotate(-90deg);
    transform-origin: 0 0;
    vertical-align: bottom;
    height: 100%;
    margin-top: 110px;
    width: 220px;
 }
 .fixed-left-text{
      font-size: 13px;
    line-height: 18px;
 }