如何将文本内联旋转90度

Question

我该如何在不使用样式表的情况下将文本旋转90度？我已经将以下指令放置在页面的头部区域：

<style>
div.rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>

然后我在相关段落周围放置了以下内容。

<div id="rotate-text">
<p>My paragraph</p>
</div>

但它并没有起作用，因此我的问题。

- Chris Gedge

---

你的CSS选择器有误：应该是div#rotate-text而不是div.rotate-text。.表示类，#表示ID。 - sjahan

Answer 1

你可以使用 CSS 属性 writing-mode

writing-mode: vertical-rl

或者

writing-mode: vertical-lr

或者使用 transform 属性：rotate

transform: rotate(90deg)

- Freestyle09

---

是的，书写模式就是我想要的！我想要旋转表格中的长标题，这样它们就不会占用太多空间了。 - CpILL

Answer 2

这里是一个小的可视化示例：

#rotate-text {
   width: 25px;
   transform: rotate(90deg);
}

<div id="rotate-text">
  <p>My paragraph</p>
</div>

- sjahan

---

我应该像我所做的那样，在<style></style>之间包装标题ID信息吗？ - Chris Gedge

是的，只需在您的<style></style>标签中设置CSS块即可。 - sjahan

Answer 3

您在html代码中使用了id，因此在css中必须使用#。

div.rotate-text {

收件人：

div#rotate-text {

div#rotate-text {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 100px;
  transform-origin: top left;
  margin: 50px;
}

<div id="rotate-text">
  <p>My paragraph</p>
</div>

- Ehsan

Answer 4

对于文本内容，编写模式更佳。使用transform: rotate()时，文本容器仍保持水平尺寸。

writing-mode: vertical-rl; //Rotate -90deg
writing-mode: vertical-lr; //Rotate 90deg

- dvdmn

Answer 5

要从下往上阅读文本，请使用以下方法：

#rotate-text {
   writing-mode: vertical-lr;
   transform: scale(-1, -1);
}

<div id="rotate-text">
  <p>My paragraph</p>
</div>

- Hokascha