如何旋转文字及其容器？

我目前正在一个项目中，我想在文本的边缘应该与容器边缘对齐的容器中旋转文本。如何旋转文字及其容器？

如果我正常转动它，它会导致如下：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

回答