HTML List First-Line indent only

Question

im trying to achieve something that i thought it was easy, but the reality is cruel. I have a simple list

• item 1
• item 2

I'm trying to get the following result: when the text is longer than the available width and the browser wrap it, i want it to go underneath the bullet i.e. applying indent only on the first line, where the bullet is. It seems the list item is rendered as block, so any suggestions?

Answer 1

You can do it on your CSS, by specifying your bullet to be inside list:

Like this

ul{
    list-style: disc inside none;
}

You can test it here

Answer 2

Try the list-style-position: inside; for the <li> element. More info http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position.