在css中偏斜一段，但保持每一行左对齐

Question

我试图扭曲一些位于div内的文本，这很好直接，但我试图找到一种方法来保持每条线完全左对齐div的一侧，因为目前前几行坐在这么多像素，最后几行溢出。 我们使用的字体已经是斜体，但是我们想用偏斜来推动它，我知道它不会看起来很完美，但它适用于我们想要的东西。

有没有办法做到这一点？ 我已经尝试过搜索一个，但我不确定我是否正在寻找合适的东西，或者这是没有人烦恼的事情。

这是一个基本的JSfiddle

还有一个可怕的模拟...... 糟糕的模型

以及测试它的基本代码......

这是CSS：

.box {
width:600px;
height:300px;
background:#f1f1f1;
}
.box p {
 transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */ 
}

和HTML：

<div class="box">
    <p>Text here - more in the fiddle</p>
</div>

多谢你们！

Answer 1

这可能是一个愚蠢的问题，但你只是想要斜体文字吗？ 如果是这种情况，并且默认情况下你的字体是斜体，只需完全删除skew并给你的.box p选择器font-style: italic ：

.box p {
    font-style: italic;
}

JSFiddle演示 。

但是，如果您希望文本的容器倾斜，那么您可以执行的是引入容器元素并对其应用skew ：

<article>
    <p>...</p>
</article>

.box article {
    transform: skew(-20deg);
   -ms-transform: skew(-20deg); /* IE 9 */
   -moz-transform: skew(-20deg); /* Firefox */
   -webkit-transform: skew(-20deg); /* Safari and Chrome */
   -o-transform: skew(-20deg); /* Opera */ 
}

现在只需通过向相反方向倾斜相同的量来抵消p元素的偏斜：

.box article p {
    font-style: italic;
    transform: skew(20deg);
   -ms-transform: skew(20deg); /* IE 9 */
   -moz-transform: skew(20deg); /* Firefox */
   -webkit-transform: skew(20deg); /* Safari and Chrome */
   -o-transform: skew(20deg); /* Opera */ 
}

在这里，我再次添加了font-style: italic ，使文本呈现斜体。

JSFiddle演示 。