在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演示。