Search code examples
csslisthtml-listsellipsis

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

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

  • 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>