垂直显示文字

Question

有没有办法在不使用CSS3的情况下垂直显示文本，并且大多数浏览器都支持。目前我使用的是图像，但需要更改为实际文本。

也许是CSS和jQuery的组合？

Answer 1

我的第一个答案是

.element {
   -moz-transform: rotate(90deg);
   -webkit-transform: rotate(90deg) ;
   -o-transform: rotate(90deg) ;
   -ms-transform: rotate(90deg) ;
   transform: rotate(90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

但你说你想避免使用css3（在我看来，这不是一个明智的选择，因为它可以很好地，快速，高效地完成工作，如果在所有主流浏览器中完成，直到IE 7 ......这段代码应该做的伎俩）

如果你真的坚持javascript那就是jangle（https://github.com/corydorning/jangle），你可以用它来做像

这样的事情

 <script>
   $('.element').jangle(90);
 </script>

理想情况下，我建议使用css3技巧，然后使用jangle作为后备。您可以使用http://www.modernizr.com/来检测浏览器在CSS（通过html标记中的类）和JavaScript中旋转的能力。

你甚至可以为动画做同样的事情：CSS 2d转换+动画如果可行，如果没有，则回退到jangle。

修改以显示选择器的工作方式：

.element只是一个示例，显然您可以放置​​任何有效的CSS selector，例如：

 .class {
     background-color: red;
 }
 #ID {
     background-color: green;
 }
 p {
     background-color: blue;
     color:white;
 }

 #ID .class {
     background-color: yellow;
 }

 #ID p.class {
     background-color: grey;
 }

会匹配

中的元素

<div id="ID">
    <p class="class">
        Text in a "p" with class "class" inside id "ID"
    </p>
    <p>
        Text in a "p" inside id "ID"
    </p>
    <div class="class">
        Text with class "class" inside id "ID"
    </div>
    Text inside id "ID"
</div>
<p class="class">
   Text in a "p" with class "class"
</p>
<div class="class">
   Text class "class"
</div>
<p>
   Text in a "p" 
</p>

您可以在此处查看此内容：http://jsfiddle.net/ramsesoriginal/nXqJ2/

Answer 2

以下是如何操作：

目前使用CSS转换很容易实现垂直文本：

.vertical-text {    
    transform: rotate(90deg);
    transform-origin: left top 0;
}

根据您希望文本垂直显示的方向，旋转方式会有所不同，但旋转的值会使文本垂直。这是一个有用的提示：

.vertical-text {

    float: left;
}

浮动元素将基本上模拟自动宽度！

Answer 3

我认为您可以使用此功能：http://www.w3schools.com/css3/css3_2dtransforms.asp如果您将文本放在div中。