垂直显示文本答案

【问题标题】：Display text vertically垂直显示文本
【发布时间】：2012-02-25 10:04:55
【问题描述】：

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

也许是 CSS 和 jQuery 的组合？

【问题讨论】：

你试过谷歌搜索“css垂直文本”吗？
How to draw vertical text with CSS cross-browser?的可能重复
“大多数浏览器”是什么意思？为了最大限度地兼容您的图像。
在我看来，坚持你的形象是一个非常糟糕的建议。增加加载时间，难以管理，不是真正的语义，不是真正可索引或搜索（由用户，在浏览器中），增加带宽使用，...

标签： jquery html css

【解决方案1】：

我认为你可以使用这个：http://www.w3schools.com/css3/css3_2dtransforms.asp 如果你把文本放在一个 div 中。

【讨论】：

不使用 CSS3 如问题中所述
我以前也使用 w3schools 来编写文档，但 Mozilla 开发者网络做得更好：developer.mozilla.org/en/CSS/transform
是的 mozilla 做得更好，但是 9 以下的 IE 不支持它... :(
如果你看我的回答，filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 部分使它可以与 IE8 一起工作（根据一些甚至 7，但我从未检查过。但就像我已经在 @987654323 中声明的那样@你可以使用 CSS3，然后使用 javascript 作为后备）

【解决方案2】：

我的第一个答案是

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

【讨论】：

.element 只是一个示例。您可以在其中放置任何有效的 css 选择器。我更新了问题以更详细地解释这一点。

【解决方案3】：

这是怎么做的：

如今，使用 CSS 转换可以轻松完成垂直文本：

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

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

.vertical-text {

    float: left;
}

浮动元素本质上会模拟自动宽度！

【讨论】：