css - 如何将文本内联旋转 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>

但它不工作，因此我的问题。

Answer 1

这是一个小的视觉示例：

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

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

Answer 2

你id在html代码中使用of，所以你必须#在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>

Answer 3

您可以使用 css 属性writing-mode

writing-mode: vertical-rl

或者在相反的方向简单地变换旋转

transform: rotate(90deg)

Answer 4

书写模式更适合文本内容，使用 transform: rotate() 文本容器仍保持水平尺寸。

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