CSS旋转文本 - 复杂

这只是一个CSS问题，但可以使用jQuery保存或许或非常聪明的CSS技术。看看你的想法。我创建了一个JSFiddle，以便您可以进行试验。 http://jsfiddle.net/WMVMW/157/CSS旋转文本 - 复杂

查看下面的问题。

这只能在Android和Safari浏览器上工作 - 所以不要担心IE！

当我开始这个项目时，我原本计划使用CSS3来旋转一些HTML文本 - 并非真正理解transform属性的含义。

我正在做的是一个交互式平面图。我有很多绝对定位的DIVS代表摊位/展位。由于我的一些DIVS非常薄但很高，我的想法是旋转DIV-90度内的文字。

这就是每个DIV的布局 - 它们实际上不是DIV的，而是具有DIV风格行为的A标签。

<a href="" title="" id="200" class="cell"><span>Harley Davidson</span></a>

A标签内的跨度有display: table cell;行为，这是为了让文字可以盒内垂直对齐。

上的标签只做位置风格的ID号，类.cell式控制所有其他行为..

我的挑战是引入了一个名为.rotate其旋转文本-90degrees新类。但在外观上仍具有相同的外观 - 文本流动，而不是继承包含A标签的宽度和高度。请参阅下面的旋转类是如何加入...

<a href="" title="" id="200" class="cell rotate"><span>Harley Davidson</span></a>

见的jsfiddle这里......所有的CSS样式，以及

http://jsfiddle.net/WMVMW/157/

任何帮助将是真棒。我希望这足以理解。

来源

2011-08-09 Joshc

你想这样做：http://jsfiddle.net/rathoreahsan/gjQfY/ –

诀窍是旋转整个a而不仅仅是span。活生生的例子：http://jsfiddle.net/WMVMW/164/

a.rotate{ 
    -moz-transform:rotate(-90deg); 
    -webkit-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); 
} 

#R135, #R135-1 { 
    left: -35px; 
    top: 85px; 
    width:157px; 
    height: 42px;  
}

所以我颠倒了width和height（因为它会旋转），然后重新定位它。

来源

2011-08-09 12:14:05 tw16

我认为这是可以完成的唯一方法。除非聪明的JavaScript被用来翻转跨度的继承高度。我正在避免这种选择，因为我有很多立场重新定位和扭转宽度/高度。 ......但这似乎是迄今唯一可行的方法。谢谢你的帮助！ – Joshc

你可以添加其他内部的额外<span>：http://jsfiddle.net/WMVMW/160/

来源

2011-08-09 11:49:56

这并不显示所有的文字。它从* Harley Davidson Retail *中切断了零售*。 – tw16

这是我第一次尝试，但'哈雷戴维森零售'文本制动三条线 - 需要在一条线上流动。跨度的继承宽度和高度值需要翻转 - 然后它会工作！ - 甚至可能会有一个额外的跨度。感谢您的帮助。 – Joshc

CSS旋转文本 - 复杂

回答

相关问题