如何将文本内联旋转 90 度答案

【问题标题】：How to rotate text 90 degrees inline如何将文本内联旋转 90 度
【发布时间】：2018-04-25 22:40:18
【问题描述】：

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

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

【问题讨论】：

您的 css 选择器错误：它应该是 div#rotate-text 而不是 div.rotate-text。 . 是一个类，# 是一个 id。

标签： css rotation text-rotation

【解决方案1】：

这是一个小的视觉示例：

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

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

【讨论】：

我应该像之前那样在之间包裹 header id 信息吗？
是的，只需在 <style></style> 标记中设置 CSS 块就可以了！

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以使用css属性writing-mode

writing-mode: vertical-rl

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

transform: rotate(90deg)

【讨论】：

【解决方案4】：

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

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

【讨论】：