垂直文字方向

Question

我一直在尝试像在ms-word表中那样将文本沿垂直方向移动，但到目前为止，我只能做到这一点 ……我不满意，因为它是一个旋转的盒子……是不是有没有办法获得实际的垂直方向文字？

我仅在演示中将旋转设置为305度，这不会使文本垂直。270deg会，但我只是进行演示以显示轮播。

Answer 1

-webkit-transform: rotate(90deg);其他答案是正确的，但它们导致了一些对齐问题。在尝试不同的事情时，此CSS片段代码非常适合我。.vertical{    writing-mode:tb-rl;    -webkit-transform:rotate(90deg);    -moz-transform:rotate(90deg);    -o-transform: rotate(90deg);    -ms-transform:rotate(90deg);    transform: rotate(90deg);    white-space:nowrap;    display:block;    bottom:0;    width:20px;    height:20px;}

Answer 2

我正在搜索实际的垂直文本，而不是HTML中的旋转文本，如下所示。所以我可以使用以下方法来实现。HTML：-<p class="vericaltext">Hi This is Vertical Text!</p>CSS：.vericaltext{&nbsp; &nbsp; width:1px;&nbsp; &nbsp; word-wrap: break-word;&nbsp; &nbsp; font-family: monospace; /* this is just for good looks */}更新：-如果需要显示空格，则将以下属性添加到CSS中。white-space: pre;因此，css类应为.vericaltext{&nbsp; &nbsp; width:1px;&nbsp; &nbsp; word-wrap: break-word;&nbsp; &nbsp; font-family: monospace; /* this is just for good looks */&nbsp; &nbsp; white-space: pre;/* this is for displaying whitespaces */}由于&nbsp; white-space: pre;在Firefox（到目前为止）上似乎不起作用（针对此特定用途），因此只需将该行更改为white-space: pre-wrap;因此，css类应为.vericaltext{&nbsp; &nbsp; width:1px;&nbsp; &nbsp; word-wrap: break-word;&nbsp; &nbsp; font-family: monospace; /* this is just for good looks */&nbsp; &nbsp; white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/}