如何在html中从下到上设置垂直文本？
Posted
技术标签:
【中文标题】如何在html中从下到上设置垂直文本？【英文标题】：How to set vertical text from bottom to top in html? 【发布时间】：2013-12-03 01:13:29 【问题描述】：从top to bottom 设置文本很容易，并且有足够的资源来做到这一点。
问题在于bottom to top 垂直对齐。
见下图-
【问题讨论】：
对齐有什么问题？ @putvande 我没有想出设置从底部到顶部垂直对齐的方法。 ***.com/questions/1080792/… ? 这些是动态生成的文本。所以我考虑将每个文本放在表格中的<td> 标记中。
【参考方案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 仍然水平显示。
以上是关于如何在html中从下到上设置垂直文本？的主要内容，如果未能解决你的问题，请参考以下文章