CSS - text-overflow: ellipsis causes <li>'s number to disappear

Question

I'm currently using ellipsis to truncate an order list's items which are more than one line long. However, the li's that are too long and require an ellipsis automatically have the number on the left removed. Is there a way to prevent this from happening?

Without the css, the list-items have numbers.

<style>    
#test li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
}
</style>

<ol id="test" style="width:100px;">
    <li>test1</li>
    <li>test1</li>
    <li>toooooooooooooooooo loooooooooooooooooonnnnnnnnnnnnnnggggggg</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
</ol>

Solution 1

List style Position defaults to Outside. Change to inside and the numbers should appear.

<style>    
#test li {
  list-style-position:inside;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
}
</style>

Solution 2

Try using list-style-position: inside; for the ol

#test {
   list-style-position: inside;
}

DEMO

Comments

[Dips]

Do not use width or use width:auto if you want to show all. You have set fixed width so if the text goes over the width will be hidden.

[CHawk]

But without a width how can I get the ellipsis to appear?

[Chloe]

Also ul {margin-left: -10px;} to compensate for the rightward shift.