html - Numbers not showing with list items in ordered list with display: inline-block; and text-overflow: ellipsis; -

i trying make ordered list of links facing problems, not showing numbers list items when using display: inline-block; , text-overflow: ellipsis;

i have html

<ol>     <li><a href="one">link 1 one 1 one 1 one 1 one</a></li>     <li><a href="two">link 2 two 2 two 2 two 2 two</a></li>     <li><a href="three">link 3 three 3 three 3 three</a></li>     <li><a href="four">link 4 four 4 four 4 four four</a></li>     <li><a href="five">link 5 five 5 five 5 five 5 five</a></li>     <li><a href="six">link 6 six 6 six 6 six 6 six 6 six</a></li>     <li><a href="seven">link 7 seven 7 seven 7 seven seven</a></li>     <li><a href="eight">link 8 eight 8 eight 8 eight 8 eight</a></li>     <li><a href="nine">link 9 nine 9 nine 9 nine 9 nine</a></li>     <li><a href="ten">link ten ten ten ten ten ten ten ten ten ten</a></li> </ol> 

and css

ol li {   display: inline-block;   margin: 3px 12px 3px 12px;   width: 200px;   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; } 

jsfiddle https://jsfiddle.net/3hebtbvz/

i need

here trick solving lost number issue

side notes:

• a li displayed list-item , when altered inline-block list style disappears

• css counters approach

ol li {    float: left;    width: 200px;    margin-right: 30px;  }  ol li {    display: inline-block;    vertical-align: top;    width: 100%;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;  }

<ol>  	<li><a href="one">link 1 one 1 one 1 one 1 one</a></li>  	<li><a href="two">link 2 two 2 two 2 two 2 two</a></li>  	<li><a href="three">link 3 three 3 three 3 three</a></li>  	<li><a href="four">link 4 four 4 four 4 four four</a></li>  	<li><a href="five">link 5 five 5 five 5 five 5 five</a></li>  	<li><a href="six">link 6 six 6 six 6 six 6 six 6 six</a></li>  	<li><a href="seven">link 7 seven 7 seven 7 seven seven</a></li>  	<li><a href="eight">link 8 eight 8 eight 8 eight 8 eight</a></li>  	<li><a href="nine">link 9 nine 9 nine 9 nine 9 nine</a></li>  	<li><a href="ten">link ten ten ten ten ten ten ten ten ten ten</a></li>  </ol>