垂直文字方向

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{

    width:1px;

    word-wrap: break-word;

    font-family: monospace; /* this is just for good looks */

}

更新：-如果需要显示空格，则将以下属性添加到CSS中。

white-space: pre;

因此，css类应为

.vericaltext{

    width:1px;

    word-wrap: break-word;

    font-family: monospace; /* this is just for good looks */

    white-space: pre;/* this is for displaying whitespaces */

}

由于  white-space: pre;在Firefox（到目前为止）上似乎不起作用（针对此特定用途），因此只需将该行更改为

white-space: pre-wrap;

因此，css类应为

.vericaltext{

    width:1px;

    word-wrap: break-word;

    font-family: monospace; /* this is just for good looks */

    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/

}