jquery - 垂直显示文本

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/