How to create an all browser-compatible hanging indent style in CSS in a span

By : agweber
Source: Stackoverflow.com
Question!

The only thing I've found has been;

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

The only way for this to work is putting text in a paragraph, which causes those horribly unsightly extra lines. I'd much rather just have them in a <span class="hang"></span> type of thing.

I'm also looking for a way to further indent than just a single-level of hanging. Using paragraphs to stack the indentions doesn't work.

By : agweber


Answers

Found a cool way to do just that, minus the nasty span.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

Nice and simple :D

If the newlines are bothering you in p blocks, you can add

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

JSFiddle Example



ysth's answer is best with one debatable exception; the unit of measure should correspond to the size of the font.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

"3" would also work adequately well; "em" is not recommended as it is wider than the average character in an alphabetic set. "px" should only be used if you intended to align hangs of text blocks with differing font sizes.

By : JCH2


<span> is an inline element. The term hanging indent is meaningless unless you're talking about a paragraph (which generally means a block element). You can, of course, change the margins on <p> or <div> or any other block element to get rid of extra vertical space between paragraphs.

You may want something like display: run-in, where the tag will become either block or inline depending on context... sadly, this is not yet universally supported by browsers.

By : Shog9


This video can help you solving your question :)
By: admin