Display Paragraph's text with Diagonal Indent

Question

I wonder if there is a way to display paragraph text with diagonal indent to be some thing like that!

Keeping in mind that this text is written in WYSIWYG editor (Contains html tags).

I was thinking if there is a way to count the words within the paragraph excluding html tags and then making some equations to increase the indent of the text every line by jQuery or Javascript.

Is there any suggestions to do that ?

Answer 1

You can skew the containing div

.holder{
  transform:skew(-40deg);
}

<div class="holder">
    <span class="rotate">Just </span>
    <span class="rotate">Like</span>
    <span class="rotate">This! </span>
</div>

and then unskew each word inside it.

.rotate {
  transform: skew(40deg);
}

https://jsfiddle.net/dcst94sv/5/