如何在html中从下到上设置垂直文本？答案

【问题标题】：How to set vertical text from bottom to top in html?如何在html中从下到上设置垂直文本？
【发布时间】：2013-12-03 01:13:29
【问题描述】：

从top to bottom 设置文本很容易，并且有足够的资源来做到这一点。

问题在于bottom to top 垂直对齐。

见下图-

【问题讨论】：

对齐有什么问题？
@putvande 我没有想出设置从底部到顶部垂直对齐的方法。
stackoverflow.com/questions/1080792/… ?
这些是动态生成的文本。所以我考虑将每个文本放在表格中的<td> 标记中。

标签： html css vertical-alignment text-alignment

【解决方案1】：

div {  
    top:90px;   
    position:relative;  
    width:50px;   
    white-space:nowrap; 
    -ms-transform:rotate(270deg);   
    -moz-transform:rotate(270deg);   
    -webkit-transform:rotate(270deg);  
    -o-transform:rotate(270deg);   
}

对我来说效果很好。

【讨论】：

【解决方案2】：

你可能想试试这个。

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

【讨论】：

【解决方案3】：

这应该可行：

<head>
<style>
div
{
  width:130px;
  height:50px;
  -ms-transform:rotate(270deg); /* IE 9 */
  -moz-transform:rotate(270deg); /* Firefox */
  -webkit-transform:rotate(270deg); /* Safari and Chrome */
  -o-transform:rotate(270deg); /* Opera */
}
</style>
</head>
<body>
<br><br><br>
<div><h3>Vertical Text</h3></div>
</body>

【讨论】：

这些是动态生成的文本。所以我考虑将每个文本放在表格中的标记中。有什么想法吗？
定义一个类而不是div{...}。将其命名为 rotate{...} 之类的名称，然后使用 <td><div class="rotate">Your Text</div></td> 即可！
是否需要创建类。我不能简单地做：<div style='font-size:8px;-ms-transform:rotate(270deg);-moz-transform:rotate(270deg);" +"-webkit-transform:rotate(270deg);-o-transform:rotate(270deg);>Vertical Text</div>
显然没有必要创建一个类！类使您无需一次又一次地重复这些代码行，并且您的代码看起来更干净。但是，是的！无论哪种方式都可以。
不，没有用。我在 android 中将 html 转换为 pdf 的 itextpdf 仍然水平显示。