3

我试图歪曲一些位于 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>

多谢你们！

4

1 回答 1

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

于 2013-12-09T15:16:38.963 回答