将 <p> 中的水平文本与倾斜的 <div> 对齐答案

【问题标题】：Aligning horizontal text in <p> to an angled <div>将 <p> 中的水平文本与倾斜的 <div> 对齐
【发布时间】：2013-02-01 14:23:43
【问题描述】：

我正在尝试在我的页面上创建带有文字的楼梯效果。我在<section>. 中包裹了一个<p> 元素，该部分具有以下样式：

section{
    transform:rotate(-37.6deg);
    -ms-transform:rotate(-37.6deg); 
    -moz-transform:rotate(-37.6deg); 
    -webkit-transform:rotate(-37.6deg); 
    width: 200px;       
}

我希望 <p> 中的文本被限制在我创建的旋转框内，然后能够旋转文本，使每一行都是水平的，沿着 @987654326 的线向下移动@盒子。

This 是该页面的链接，因此您可以更好地了解我要完成的工作。

【问题讨论】：

似乎能够做到这一点，
需要是一个内联元素，使每行可编辑以在其自己的轴上旋转。问题是，当段落设置为内联时，旋转命令不再起作用，对吗？
我认为不可能为多行
执行此操作，至少按照您尝试的方式。您可以将

设置为显示块，然后使每个 p 仅保留 1 行文本（不太实用）
我昨天有这个工作。现在四个小时，我无法复制效果。我计算机上的浏览器是否有可能接受内联元素的 transform: rotate 命令？
它适用于我的 inline-block 和 inline-table，但旋转是针对整个 p 完成的，而不是针对 p 中的每一行
与此问题无关，但请注意，该属性的无前缀版本应该放在最后，以便在支持时在级联中胜出。否则前缀版本将覆盖它。为 Opera 添加 -o- 前缀也很好。

标签： html css text alignment

【解决方案1】：

您无法使用这种方法实现您的目标，因为 CSS 转换 是由 GPU 在 DOM 渲染之后渲染的，因此（例如）转换后的元素不会' t 影响其他元素的位置和大小。

要实现您的目标，您应该使用 jQuery 解决方案，例如“http://www.csstextwrap.com/”

【讨论】：