Every once in a while, you may find yourself in a position where you need to create a hanging indent on a paragraph or set of paragraphs on one of your pages. There isn’t really an out-of-the-box way to do so with CSS, but you can accomplish it pretty easily by combining two CSS properties.
In case you aren’t sure what a hanging indent is, it’s basically when the first line of a paragraph is flush with the left margin, but any subsequent lines in that paragraph are indented. Following is an example of a hanging indent:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas aliquam nisi, non euismod nisi ultricies non. Suspendisse potenti. Morbi suscipit ante sit amet diam egestas et molestie elit lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris metus arcu, scelerisque eu aliquet scelerisque, interdum faucibus odio.
To accomplish this, you simply need to combine the text-indent property, which indents the first line of a block-level HTML element, with the padding property. If you apply a negative text-indent to the paragraph, the first line will be indented (well, the opposite of indented, really) to the left rather than being indented to the right. Doing that will cause all of the subsequent lines to be flush with the left margin, while the first line will be shifted to the left of the margin.
Then, apply an equal, positive left padding to that paragraph. That will cause the first line to end up flush with the left margin again, and will push all subsequent lines that far in from the margin.
Your code might look something like the following.
<p style="text-indent: -2em; padding-left: 2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas aliquam nisi, non euismod nisi ultricies non. Suspendisse potenti. Morbi suscipit ante sit amet diam egestas et molestie elit lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris metus arcu, scelerisque eu aliquet scelerisque, interdum faucibus odio.</p>
That’s really all there is to it. I hope that comes in handy for you somewhere down the road.
Post Your Comment