垂直方向文本(书写模式:lrbt).位置随文本长度而变化

Question

想要垂直定位动态文本，但文本长度会改变文本的位置，这是代码片段，添加更多文本会改变位置，请尝试此链接

css

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

Answer 1

我想你正试图做这样的事情。注意，不需要添加设置的高度/宽度，因为translate和transform-origin值将动态调整定位。

JSFiddle演示

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