Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 955
agweber Avatar asked Aug 15 '08 00:08

agweber


1 Answers

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

like image 193
Shog9 Avatar answered Sep 22 '22 22:09

Shog9