Question

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

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

基本上是JSfiddle

和一个可怕的模拟...... bad mockup

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

这是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 demo

但是，如果您希望文本的容器倾斜，那么您可以做的是引入容器元素并在其上应用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 demo

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

1 个答案: