CODEWITHSUNDEEP
css
vaughan
vaughan

Reputation: 7465

When text wraps in HTML paragraph, align to first non-whitespace character on first line with *only* css

I have a paragraph of text as follows:

<p>

&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; In this respect, the conceptual structure of the Act is something like a pyramid. The pyramid shape illustrates the way the income tax law is organised, moving down from the central or core provisions at the top of the pyramid, to general rules of wide application and then to the more specialised topics.

</p>

At the moment it renders to this:

                   In this respect, the conceptual structure of the Act is something like a pyramid. The pyramid shape illustrates the way the income tax law is organised, moving down from the central or core provisions at the top of the pyramid, to general rules of wide application and then to the more specialised topics.

I want it to render like this:

                   In this respect, the conceptual structure of the Act is something like a 
                   pyramid. The pyramid shape illustrates the way the income tax law is  
                   organised, moving down from the central or core provisions at the top of 
                   the pyramid, to general rules of wide application and then to the more 
                   specialised topics.

Only using CSS!

Backstory

I am converting Markdown files to HTML. These files are in source control. The Markdown files are already indented for me using &ensp; chars. I also want clean commit logs so I want to keep each <p> on a single line.

Edit

Here is a gist of a section from one of the Markdown documents: https://gist.github.com/vjpr/5378401

Basically I want to

Upvotes: 0

Views: 410

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You may use a combination of padding-left and negative text-indent, e.g.

p{
    padding-left:18em;
    border: 1px solid black;
    text-indent :-9em;
}

Example fiddle: http://jsfiddle.net/NzUtM/1

Feel free to adjust padding and indent as you need.

Upvotes: 2

Related Questions