如何旋轉文字及其容器？

我目前正在一個項目中，我想在文本的邊緣應該與容器邊緣對齊的容器中旋轉文本。如何旋轉文字及其容器？

如果我正常轉動它，它會導致如下：http://jsfiddle.net/lumio/a3Z4C/
正如你所看到的，文本流出容器的，但我想在它有它。
因此，不應該旋轉完整的文本，而是應該將這些行與容器對齊。

有誰知道CSS或JS的解決方案？

最良好的祝願

2012-02-28 lumio

裏面難道沒有足夠的只是把一些填充的容器上？ http://jsfiddle.net/a3Z4C/4/或者你的意思是你希望線返回發生在框的邊緣？ – 2012-02-28 15:38:48

爲什麼不直接在容器上進行轉換？ http://jsfiddle.net/XWHsC/ – j08691 2012-02-28 15:50:24

@JamesMontagne：是的...線應該根據框的邊緣:) – lumio 2012-02-28 16:05:08

如果你在一些填充添加到容器DIV的文本框內很好流動。我爲jsFiddle示例添加了至少10px，並且文本位於容器內。 Howerver，它可能會更好地添加更多的填充，如下所示：

.container { 
    width: 300px; 
    background: silver; 
    margin: 20px; 
    padding: 10px; 
}

2012-02-28 15:42:16 ItsMIllerTime65

感謝您的回覆，但如果您還有其他3段？ ;）該解決方案將無法正常工作 – lumio 2012-02-28 15:46:49

非常真實... :) – ItsMIllerTime65 2012-02-28 19:51:37

您是否動態計算旋轉？如果是這樣，您可能需要動態添加一些填充到容器中。不知道確切的算法將是什麼，但它會是這樣的P =（d * N）

P =填充， d =度， N =神奇的數字，使這一切工作:)

2012-02-28 15:42:59 Matt

你很有趣：D但N會是行數，但我不知道如何用JS計算該數字：D 反正...也許有更好的東西 – lumio 2012-02-28 15:45:36

@Lumio：行數=（容器的像素高度/你使用的字體的像素高度）。我意識到我們正在進入相當數量的硬編碼值，但我想這是一個概念證明。 – Matt 2012-02-28 15:51:46

是的......我也想到了行...所以N =行高 - 或者N應該等於42？：D 無論如何......問題將是另一個......完整的文本將被旋轉，但不是行 – lumio 2012-02-28 16:04:38

好的有一個選項。您可以將容器放在另一個容器內。因此，無論你把容器T的內部將始終保持父

/jsfiddle.net/smitdesai/dsvUS/

2014-03-11 08:18:00 user3405120

回答