Hanging indent on unbulleted list with CSS

Question

I am trying to create a <ul> with no bullets (i.e. list-style-type: none) where the items have a hanging indent (all lines except first are indented). I do not mean that all <li> after the first should be indented-- rather that, if an <li> spans more than one line, all lines after the first should be indented within that <li>. How can I achieve this?

So far I've tried:

• text-indent: 5px hanging: no effect, hanging is not yet supported
• text-indent: -5px; padding-left: 5px: found this trick here, but it did not work in this context
• the solution at this SO question, which didn't work for unbulleted lists

NOTE: I know that I can achieve this by other means (e.g. using <p>s instead of a list), but I am wondering whether it is possible with <ul>.

Answer 1

You can add some padding and a negative text-indent.

ul {
  list-style: none;
  padding-left: 40px; /* Most browsers already have this by default */
}
li {
  text-indent: -20px;
}

<ul>
  <li>Hello<br />world<br />foo bar</li>
</ul>

Answer 2

Is this what you are trying to achieve?

ul {
  list-style: none;
  margin: 0;
  padding-left: 20px
}
li {
  text-indent:-15px;

}

<ul>
  <li>test
    <br/>me</li>
</ul>