CSS - переполнение текста: многоточие приводит к исчезновению числа <li>

Question

В настоящее время я использую многоточие для усечения элементов списка заказов длиной более одной строки.Однако, для 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>

Answer 1

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

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

Answer 2

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

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

DEMO