如何使html中的文本垂直？

嘿，我不知道如何使垂直文本在HTML中我想这：如何使html中的文本垂直？

<head> 
 
<style> 
 
body { 
 
\t transform: rotate(90deg); 
 
\t transform-origin: left top 0; 
 
\t background-color: red 
 
} 
 
</style> 
 
</head> 
 
<body>Hello World!</body>

，但它只是由红色的背景色。你能帮我吗？

来源

2017-04-08 Anonymous 1582

我希望能回答你的问题，如果是的话请回答任何问题（https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） – bhansa

伴侣，不这样做，直接影响到身体。

创建一个类，例如'vertical-container'，然后在那里应用样式。

<head> 
<style> 
body .vertical-container { 
    transform: rotate(90deg); 
    transform-origin: left top 0; 
    background-color: red 
} 
</style> 
</head> 
<body> 
<div class="vertical-container" > Hello World! </div> 
</body>

编辑：记住那么这元素将有一定的继承属性从父（体在这种情况下），因为它是相对定位的默认值。所以你可能需要'玩'的尺寸，直到你有你真正想要的东西。例如，如果您想要的是全屏内容，请给出身高：100％，宽度：100％。

来源

2017-04-08 13:58:28 Sam

我想这个例子很好。但可能对大型应用程序有帮助。 – bhansa

我认为你做实现它，但它推离帆布...

更新：评论之后，我还展示了-90度变换。请注意，多余的定位规则（特别是“底部”）来自两段。但重要的是，当你旋转一些东西时，它可能会在画布上结束，而不需要额外的定位。

body { 
 
    background-color: red 
 
} 
 

 
p.ninety { 
 
    transform: rotate(90deg); 
 
    transform-origin: left top 0; 
 
    position: relative; 
 
    left: 20px; 
 
} 
 

 
p.minusninety { 
 
    transform: rotate(-90deg); 
 
    transform-origin: left top 0; 
 
    position: relative; 
 
    left: 40px; 
 
    bottom: -78px; 
 
}

<body> 
 
    <p class="ninety">Hello World!</p> 
 
    <p class="minusninety">I'm getting dizzy!</p> 
 
</body>

来源

2017-04-08 13:57:10 mayersdesign

Omg谢谢我没看见它！ –

耶感谢你帮助 –

我想如果我会给那里270它应该是另一边？ –

如何使html中的文本垂直？

回答

相关问题