html - 对齐水平文本到一个有角度的

Question

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

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

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

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

Answer 1

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

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