垂直方向文本（写入模式：lr-bt）。位置随文本长度变化 [英] 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;
}

推荐答案

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

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演示

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

这篇关于垂直方向文本（写入模式：lr-bt）。位置随文本长度变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！