垂直显示文本

有没有办法在不使用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 ），你可以用它来做像

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

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

编辑以显示选择器的工作方式：

.element只是一个示例，显然你可以放置任何有效的CSS 选择器 ，例如：

  .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; } 

会匹配元素

 
 
 Text in a "p" with class "class" inside id "ID" 
 
 Text in a "p" inside id "ID" 
 
 Text with class "class" inside id "ID" 
 Text inside id "ID" 
 
 Text in a "p" with class "class" 
 
 Text class "class" 
 
 Text in a "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中。