垂直文本方向

Question

我一直在试着像垂直方向那样在文字表格中进行,但到目前为止我只能做到这一点 ......我不满意因为它是一个旋转的盒子...... Isn'有没有办法让实际的垂直方向文字？

我只在演示中将旋转设置为305度,这不会使文本垂直.270deg但我只是制作演示以显示旋转.

Answer 1

替代方法:http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

Answer 2

-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 3

我正在搜索实际的垂直文本而不是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 */
}

的jsfiddle!演示.

更新: -如果您需要显示空格,请将以下属性添加到您的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 */
}

的jsfiddle!用空白演示

更新2(28-JUN-2015)

由于 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.*/
}

JsFiddle演示FF兼容.

Answer 4

要将文字旋转90度:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

此外,如果未设置为display:block,则无法旋转span标记.

Answer 5

对于在firefox中使用下面另一个字符的垂直文本:

text-orientation: upright;
writing-mode: vertical-rl;

Answer 6

要垂直（自下而上）显示文本，我们可以简单地使用：

writing-mode: vertical-lr; 

transform: rotate(180deg);

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

请注意，我们可以添加它以确保浏览器兼容性：

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

我们还可以writing-mode在Mozilla 文档上阅读更多关于财产的信息。

Answer 7

尝试使用:

writing-mode: lr-tb;

Answer 8

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>