CSS旋转向下扩展文本？

我已经旋转了一些文字-90度，但是如果我增加文字长度，它会向上扩展（即右旋，旋转-90度），但我希望文字向下展开（即。像90deg旋转而不是-90deg，但我仍然想要-90deg方向）。CSS旋转向下扩展文本？

这里的什么我看：

enter image description here

这是我的HTML和CSS：

<div class="header"><div class="wrapper"><span>Products</span></div></div> 

.section > .header { display: block; position: relative; float: left; font-size: 48pt;  width: 157px; height: 100%; } 
.section > .header > .wrapper { width: 100%; height: 100%; 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
transform: rotate(-90deg); } 
.section > .header > .wrapper > span { display: block; position: relative; left: 25px; height: 100%; 
}

有没有办法用CSS来做到这一点？我尝试了一堆东西（旋转包装，然后反向旋转内部跨度，将文本对齐）和其他东西，但无济于事。

感谢，瑞安

来源

2012-10-09 Ryan Weiss

你有没有想过使用图像？ – Wex

是的，我想过了。我也听说过一种叫做Javascript的语言。我想知道是否可以在CSS中使用。 –

也相关：[标签：svg] – Wex

想通了出：（需要做的e text-align更正确一些）

.section > .header > .wrapper { display:block; text-align: right; } 
.section > .header > .wrapper > span { display: block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); height: 100px; width: 600px; position: relative; top: 260px; left: -180px; }

无论如何，谢谢！

来源

2012-10-09 17:03:16

您可以通过减少.header > .wrapper > span

Check this demo

的left值在这种解决这个我改变了左值-120px

.section > .header > .wrapper > span { 
    display: block; 
    position: relative; 
    left: -120px; //changed the value 
    height: 100%; 
}

来源

2012-10-09 06:35:48 Libin

这并没有解决它。我的错是因为没有合适的初始左值（-120px是第一个文本“产品”的右侧左侧），但我希望任何超出此长度的文本展开到页面底部，而不是顶部（通过标题，就像现在一样）。目前，我必须根据个别宽度更改每个标题范围的特定左值，这只是因为我无法找到让文本向左/向下展开的方法。 –

CSS旋转向下扩展文本？

回答

相关问题