如何在不使用变换旋转的情况下从下到上书写垂直文本？

Question

使用

writing-mode

我唯一的选择是使用

sideways

。但这个属性是实验性的。

.verticalTxt_lr {
  writing-mode: vertical-lr;
}
.verticalTxt_rl {
  writing-mode: vertical-rl;
}
.rotate {
  transform: rotateZ(270deg);

}

我想将条形上的标签写为垂直，但它应该从底部开始。

在为条形图设置动画时，尝试旋转会给我带来奇怪的行为，因此我正在寻找另一种方法来创建垂直文本，可以在头部向左倾斜的情况下阅读。

Answer 1

我结合了

writing-mode

和

rotation

：

    .rotated {
        writing-mode: tb-rl;
        transform: rotate(-180deg);
    }

<div class="rotated">Text from bottom with working width/height</div>

这对我来说没有坏的

width

和

height

设置在表格单元格内。

2020 年重要编辑：

步骤1）查看https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode，ctrl/cmd-F代表“结果”。该表将反映您的浏览器（可能有不正确的实现）。查看紧邻其下方的表格。那张桌子就是东西应该的样子。

解决方案：

为了确保您的解决方案面向未来：

查看相应的列，该列将是“水平脚本”，除非您正在编码，例如用亚洲语言。
找到在调整 HTML 元素大小方面满足您需求的一行，并且在其下面的第二个表中正确实现（看起来大致相同）。例如，
```
writing-mode:vertical-rl;
```
目前可以在 Chrome 上运行，直到其他内容在 Blink 引擎中正确实现为止（但如果您的答案基于
```
sideways-lr
```
，一旦 Blink 正确实现了此行为，它就会中断，因为两行不相同。 ).
可选：将
```
transform-origin
```
设置为某些内容，也许可以使用
```
calc(...)
```
，基于百分比和/或其他内容
执行
```
transform:rotate(180deg)
```
之类的事情。这应该可以解决大多数人都会遇到的布局问题，从而使他们查找此答案。如果有动画问题，那是一个单独的问题。

（tb-rl 现已弃用）

Answer 2

.rotated {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
}

<div class="rotated">Text from bottom with working width/height</div>

Answer 3

.rotate {
     transform: rotate(270deg);
}

这应该足以从下到上垂直旋转文本，将其应用到包含文本的 div 上。如果您结合使用书写模式：vertical-rl/lr，则可能会将其切换为其他方式。

Answer 4

这样就可以了：

.verticalTxt_lr {
 writing-mode: vertical-rl;
 transform: rotate(-180deg);
}