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

StackOverflow https://stackoverflow.com/questions/11809

  •  08-06-2019
  •  | 
  •  

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.

Was it helpful?

Solution

<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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top