css 如何将文本旋转90度

vybvopom 于 2023-02-06 发布在其他

关注(0)|答案(5)|浏览(201)

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

来源：https://stackoverflow.com/questions/47261100/how-to-rotate-text-90-degrees-inline

5条答案

按热度按时间

11dmarpk1#

下面是一个小的可视化示例：

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

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

赞(0）回复(0）举报 2023-02-06

iecba09b2#

您可以使用css属性writing-mode

writing-mode: vertical-rl

或

writing-mode: vertical-lr

或使用transform属性：旋转

transform: rotate(90deg)

赞(0）回复(0）举报 2023-02-06

mhd8tkvw3#

你在html代码中使用id，所以你必须在css中使用#。

变更：

div.rotate-text {

收件人：

div#rotate-text {

一个二个一个一个

赞(0）回复(0）举报 2023-02-06

hrysbysz4#

书写模式更适合文本内容，转换：rotate（），文本容器仍然保持水平尺寸。

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

赞(0）回复(0）举报 2023-02-06

vwhgwdsa5#

要从下往上读取文本，请使用以下命令：

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

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

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何将文本旋转90度

5条答案

相关问题

热门标签

最新问答