vertical direction text (writing-mode: lr-bt) . po

2019-08-30 10:42发布

问题:

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;     
}