Question

Edit: This HTML is output from a Flash application & its badly formed because it contains li elements NOT inside a ul or ol element. Is there a way to get the desired indentation with this HTML(using CSS)? Hopefully I wont have to parse the HTML & insert my ol tags where I need to, hopefully 🙁

<textformat leading="2">
<li>
    <font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; ">
    Remaining optimistic and focused while paying attention to the doubts of others
    </font>
</li>
</textformat>

Is there a way to make EVERY line of text inside a HTML li element be indented?

Example of what I am trying to achieve:

This is what currently happens which is what I am trying to avoid:

So I have this html:

<ol>
   <li><font>text here <b>some bold</b></font></li>
</ol>

Answer 1

Add a padding and text-indent:

li {
    text-indent: -1em;
    padding-left: 1em;
}

Try it on JSFiddle.