垂直显示文字 [英] Display text vertically

问题描述

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

也许是CSS和jQuery的组合？

解决方案

我的第一个回答是：

pre $ .element {
-moz-transform：rotate（ 90度）;
-webkit-transform：rotate（90deg）;
-o-transform：rotate（90deg）;
-ms-transform：rotate（90deg）;
transform：rotate（90deg）;
filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 1）;
}


但你说你想避免css3（一个不太明智的选择，我的意见，因为它会做得很好，快速，高效，如果在所有主流浏览器中都可以正常工作，那么这个代码应该可以做到这一点）

如果你确实坚持使用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 选择器，例如：

  .class {
 background-color：red; 
} 
 #ID {
 background-color：green; 
} 
 p {
 background-color：blue; 
颜色：白色; 
} 
 
 #ID .class {
 background-color：yellow; 
} 
 
 #ID p.class {
 background-color：grey; 
 
 $ / code> 

会匹配中的元素



 < div id =ID> 
< p class =class> 
在ID为ID的类class中的p中的文本
< / p> 
< p> 
在ID里面的p文本
< / p> 
< div class =class> 
 ID为ID的类class的文本
< / div> 
 ID内的文字ID
< / div> 
< p class =class> 
带class类的p文本
< / p> 
< div class =class> 
文本类class
< / div> 
< p> 
p
中的文字< / p> 
  

你可以在这里看到它的样子： http://jsfiddle.net/ramsesoriginal/nXqJ2/

Is there a way to display text vertically without using CSS3 and will be supported by most browsers. Currently I use image instead, but need to change to actual text.

Perhaps a combo of CSS and jQuery?

解决方案

My first answer would be

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

but you said you want to avoid css3 (A not so wise choice, in my opinion, as it would do the job well, fast, efficient and if done right across all major browsers down to IE 7... this code should do the trick)

If you really insist on javascript there's jangle ( https://github.com/corydorning/jangle ), with which you can do stuff like

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

Ideally I would recommend doing the css3 trick, and then as a fallback using jangle. you can use http://www.modernizr.com/ for detecting the browser's ability to rotate both in CSS (through a class on the html tag) and in JavaScript.

You can even do the same for animations: CSS 2d transformation + animation if aviable, and if not, fallback to jangle.

Edit to show how selectors work:

.element is just an Example, clearly you can place any valid CSS selector, for example:

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

would match elements in

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

You can see how this looks here: http://jsfiddle.net/ramsesoriginal/nXqJ2/

这篇关于垂直显示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！