Перекосите абзац в css, но держите каждую строку слева оправданной

Я пытаюсь перекосить какой-то текст, который сидит внутри div, что все хорошо прямо вперед, но я пытаюсь найти способ, чтобы каждая строка полностью оставалась оправданной с одной стороны div, так как в настоящее время первые несколько строк сидят в таком количестве пикселей, а последние несколько строк переполняются. Шрифт, который мы используем, уже курсив, но мы хотим подтолкнуть его немного больше с косой, Я знаю, что он не будет выглядеть идеально, но он работает для того, что мы хотим.

Есть ли способ сделать это? Я уже пробовал я уже ищу одну, но не уверен, что я ищу правильную вещь, или это то, что никто не беспокоится делать.

Heres a basic 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>

Спасибо, ребята!

1 3
html css css3 skew

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.

1