CSS 文本方向：垂直向右对齐

Question

如何使用CSS将我的文本垂直向右排列，就像下面的图片一样？

我尝试了下面的方法，但无法使方向反转：

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

<div>dimanche</div>

- DevonDahon

---

请在问题中始终尝试包含一个 [mcve]。 - Sagar V

@SagarV 好的，我已经将我之前尝试过的可重现示例添加到了我的帖子中。 - DevonDahon

writing-mode:sideways-lr; 是什么意思？类似的问题：https://stackoverflow.com/questions/38295450/rotating-text-within-a-fixed-div/38295735 - G-Cyrillus

Answer 1

侧向布局不被所有浏览器支持。相反，您可以将其替换为比例转换。

div {
  writing-mode: vertical-rl;
  /*text-orientation: sideways;*/
  transform:scale(-1);
}

<div>dimanche</div>

- Temani Afif

---

完美的答案！受到@connexo答案的启发，我也想尝试一下，但你更快 :) - DevonDahon

兼容性注意事项：writing-mode: vertical-rl; 不支持 Edge 和 IE。请参见 此链接。需要同时使用 -webkit-writing-mode: tb-rl; -ms-writing-mode: tb-rl;（前者用于 Edge，后者用于 IE）。 - Raptor

Answer 2

使用transform将其旋转-90deg。如果您想以相反的方向旋转，请将其旋转90deg

div {
  background-color: #ccc;
  display: inline-block;
  padding: 5px;
  transform: rotate(-90deg);
  transform-origin: center bottom;
}

<div>dimanche</div>

- connexo

---

谢谢。没有办法使用 text-orientation: sideways; 来实现吗？ - DevonDahon

不可以。因为英语可以从左到右或者从上到下书写。你提到的那种方式是非标准的。 - Sagar V