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旋轉向下擴展文本？

回答

相關問題