vertical direction text (writing-mode: lr-bt) . position changes with text length

问题

want to position dynamic text vertically but text length alters the position of text, here is code snippet, adding more text changes the position try on this link

css

#rotate {
    position:fixed; 
    -webkit-transform:  rotate(270deg);
    -moz-transform:  rotate(270deg);
    -o-transform:  rotate(270deg);
    height:300px;
    background-color:#e1e1e1;
    margin-top:0px;
}

回答1:

I think you are trying to do something like this. Note there is no need to add a set height/width as the translate and transform-origin values will adjust the positioning dynamically.

JSFiddle Demo

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#rotate {
    position:fixed;

    transform:  rotate(-90deg) translateX(-100%);
    transform-origin:left top;

    background-color:#e1e1e1;     
}

来源：https://stackoverflow.com/questions/26390001/vertical-direction-text-writing-mode-lr-bt-position-changes-with-text-lengt