Is There A Simple Way To Dynamically Indent Each Line In A Div?

Is there a simple way to dynamically indent each line of a block of text inside a div? I want the text to conform to the oddly shaped div I made. Example:

Solution 1:

This won't work in all cases but something you could do if you wanted to have sloping indents is play with the css transform attribute.

I have made a js fiddle to illustrate...

http://jsfiddle.net/ycvqqxg4/10/

Edited fiddle.

div.indenting-text{
  transform: skewX(15deg);
  font-style: italic;
}

enjoy :)

EDIT:

I've gone back into the js fiddle and improved it to use a different method than the one i mentioned above. This way makes use of a div with its 'shape-outside' set to a sloped polygon so that css naturally wraps the text around the slope instead of it being jimmy rigged by css in the previous version.

here is the js fiddle

http://jsfiddle.net/ycvqqxg4/15/

Solution 2:

You could take a look at wrapping text around images, which can be done with circular images and such, like this example shows

http://demosthenes.info/blog/916/Wrapping-Text-Around-Circular-Images-With-CSS-Shapes

I think it'll give you a nicer effect. You might have to create a blank image template or something though.