css - 垂直方向文本（书写模式：lr-bt）。位置随文本长度变化

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

我认为你正在尝试做这样的事情。请注意，无需添加设置的高度/宽度，因为translateandtransform-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;     
}