27

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>
Cœur
  • 37,241
  • 25
  • 195
  • 267
CHawk
  • 1,346
  • 5
  • 22
  • 40
  • 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. – Dips Feb 29 '12 at 22:28
  • But without a width how can I get the ellipsis to appear? – CHawk Feb 29 '12 at 22:31

2 Answers2

48

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>
mcnarya
  • 841
  • 2
  • 11
  • 19
7

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

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

DEMO

Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134