li ul li is too long, line wraps but no indention

Question

I\'ve an unordered HTML list (ul). If the second word is too long the line wraps automatically but the overflowing text isn\'t indented. Any ideas how to solve

Answer 1

Replace your indent with padding

padding-left: 2em;
text-indent: -2em;

Should do the trick

Answer 2

add this CSS:

ul {
    list-style-position: outside;
}

Example here: http://jsbin.com/emeda/

Answer 3

For my ordered list and the multi line indent I have followed below css

.surveyorderedlist{
        ol{
            list-style-position: outside;
        }
        li{
            margin-bottom:5px;
            margin-left:40px;
            padding-left:8px;
        }
    }

and then your html should be

<div class="surveyorderedlist">
            <span><b>Conditions imposed</b></span>
            <ol>
                <li>Names and addresses are accessed only by the Financial Service Provider on its own behalf, and solely for its own use;</li>
                <li>Names and addresses may only be accessed for a specified purpose;</li>
                <li>The fees charged for the provision of the names and addresses from the Motor Vehicle Register (MVR) are duly paid;</li>
                <li>Any instances of unauthorised access must immediately be notified to the Secretary for Transport and the Privacy Commissioner; </li>
            </ol>
</div>

Answer 4

This is happening because the word Prophylaxe in der Schwangerschaft is too long to fit in that side bar. You need to increase the width of the sidebar containing your list.

The only other solution is to decrease the font size so that even words like above are shown as per width of the sidebar.

EDIT Please let me know if my answers is correct or not as i have some belief of that reason even though someone has -ve marked me; so please let me know if i am wrong by trying it out. thanks