在css中傾斜段落，但保持每行左對齊

我試圖扭曲一些文本，位於一個div內，這是一個很直接的好，但我試圖找到一種方法來保持每條線完全離開證明了div的一邊，因爲當前頭幾行坐在這麼多像素中，最後幾行溢出。我們使用的字體已經是斜體，但我們希望將它稍微偏移一點，我知道它看起來不太完美，但它適用於我們想要的。在css中傾斜段落，但保持每行左對齊

有沒有辦法做到這一點？我已經嘗試過搜索一個，但我不確定我是否正在尋找正確的東西，或者這是沒人會做的事情。

繼承人基本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>

謝謝你們！

來源

2013-12-09 Cheg

這可能是一個愚蠢的問題，但你只是想斜體文本？如果是這樣的話，你的字體是默認斜體就像你說的，只要徹底去除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。

來源

2013-12-09 15:16:38

感謝詹姆斯的快速回復，我認爲它的幫助，因爲我已經看到了我想要的，但沒有使用歪斜。我總是忽略最簡單的解決方案，所以只是使用font-style：italic來強制顯示它更多一點。 – Cheg

標記爲已回答。謝謝詹姆斯。必須走很長的路才能找到最短的解決方案（我責怪週日！）。 – Cheg

在css中傾斜段落，但保持每行左對齊

回答

相關問題