Css 如何旋转文本及其容器？

我目前在一个项目中，我想旋转容器中的文本，其中文本的边缘应该与容器的边缘对齐

如果我正常旋转它，将导致以下结果：
如您所见，文本从容器中流出，但我希望将其放入容器中。
因此，不应旋转整个文本，而应旋转线条，然后线条应与容器对齐

有人知道使用CSS或JS的解决方案吗

---

最美好的祝愿

如果在容器div中添加一些填充，则文本将在框中流畅地流动。我在JSFIDLE示例中添加了至少10px，文本就在容器中。但是，添加更多的填充看起来更好，如下所示：

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

---

您是否在动态计算旋转？如果是这样，您可能希望动态地向容器添加一些填充。不确定确切的算法是什么，但它类似于P=（D*N）

p=填充， D=度，

---

N=使一切正常工作的神奇数字：）

好的，这有一个选项。您可以将容器放在另一个容器中。所以不管你把什么放在容器里，t都会一直放在父容器里

---

/jsfiddle.net/smitdesai/dsvUS/

仅仅在容器上添加一些填充物还不够吗？或者，您的意思是希望根据框的边缘返回行？为什么不将转换放在容器上@詹姆斯蒙塔涅：是的。。。线条应该基于框的边缘：）你很有趣：D但是N是线条的数量，但是我不知道如何用JS:D计算这个数字。。。也许有一些“更好的”@Lumio:Number of lines=（容器的像素高度/正在使用的字体的像素高度）。我意识到我们正在进入一个相当数量的硬编码值，但我想这是一个概念证明。是的。。。我也想到了台词。。。所以N=线高度-或者N应该等于42？：D无论如何。。。问题是另一个。。。完整的文本将被旋转，但不是线条谢谢你的回复，但如果你还有3段呢？；）那个解决方案行不通