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

CHawk picture CHawk · Feb 29, 2012 · Viewed 23.5k times · Source

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>

Answer

mcnarya picture mcnarya · Feb 29, 2012

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>