Wednesday, May 21, 2014

Quick tip: CSS for Hanging indentation


Sometimes you need to achieve a fancy effect on the first line of a paragraph, so that just the first line is indented to the left and the other lines be displayed a little bit to the right. Even, I discovered that it has a name 'Hanging Indent':

This is the first line of a very very very very very
    very very very very very very very very very very
    long paragraph. And there is more than one sentence.

    In fact we could reach almost a dozen.


Just apply a combination of a negative text-indent and padding-left (or margin-left). Ex:

p {
  text-align: left;
  text-indent: -25px;
  padding-left: 25px;
}


There is a 'first-letter' property in css that gives you more customization @see this

No comments:

Post a Comment