CSS - переполнение текста: эллипсис заставляет число <li> исчезать

В настоящее время я использую многоточие для усечения элементов списка заказов, длина которых превышает одну строку. Однако li, которые слишком длинны и требуют многоточия, автоматически имеют номер слева. Есть ли способ предотвратить это?

Без css элементы списка имеют числа.

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

Ответ 1

Стиль списка Позиция по умолчанию - Внешняя. Перейдите внутрь и цифры должны появиться.

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

Ответ 2

Попробуйте использовать list-style-position: inside; для ol

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

DEMO