如何将文本内联旋转 90 度

Question

如何在不使用 sheet 样式的情况下将文本旋转 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

您在 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>

Answer 2

这是一个小的视觉示例：

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

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

Answer 3

您可以使用 css 属性 writing-mode

writing-mode: vertical-rl

或

writing-mode: vertical-lr

或使用变换属性：旋转

transform: rotate(90deg)

Answer 4

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

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

如何将文本内联旋转 90 度

How to rotate text 90 degrees inline

css

rotation

text-rotation