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

Question

使用writing-mode，你只能让文本从上到下阅读。根据https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

我唯一的选择是使用sideways。但是这个属性是实验性的。

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

}

https://jsfiddle.net/thadeuszlay/5ueopnqu/2/

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

http://jsfiddle.net/thadeuszlay/3HL4a/2402/

在为条形图设置动画时，尝试使用旋转会给我一种奇怪的行为，因此我正在寻找另一种方法来创建垂直文本，让您的头向左倾斜时也能阅读。

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 表示“结果”。该表将反射(reflect)您的浏览器(可能实现不当)。看看它下面的表格。该表是应该的样子。

解决方法:

为确保您的解决方案经得起 future 考验:

1. 查看相应的列，除非您正在编写代码，例如使用亚洲语言。
2. 在调整 HTML 元素大小方面找到适合您需要的行，并且在其下面的第二个表格中正确实现(看起来大致相同)。例如 writing-mode:vertical-rl; 目前可以在 Chrome 上运行，直到其他的在 Blink 引擎中正确实现(但是如果你的答案基于 sideways-lr一旦 Blink 正确实现此行为，它就会中断，因为两行不相同。)。
3. 可选:将transform-origin设置为某物，可能使用calc(...)，基于百分比和/或其他东西
4. 执行 transform:rotate(180deg) 或其他操作。这应该可以解决大多数人会遇到的布局问题，导致他们查找此答案。如果有动画问题，那是一个单独的问题。

(现在不推荐使用 tb-rl)