title: Numbered list with text ellipse hides the order numbers also
body: <p>I am working on a ol list with text ellipse but when i add <code>overflow: hidden ;</code> property it also hides the numeric order.</p>
  
  <p>How can i use <code>text ellipse</code> and also keep numbers visible</p>
  
  <p><a href="https://codepen.io/anon/pen/zjKwwM" rel="noreferrer">CodePen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper{width:300px; background-color:#ccc; padding:10px;}
  .tab-ol li { 
  list-style-position:inside;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;  
  }
  .ol-2 li{
    list-style-position:inside;
    white-space: nowrap;
    overflow: hidden ;
    text-overflow: ellipsis;  
  }
  ol {
   counter-reset:li; /* Initiate a counter */
   margin-left:0; /* Remove the default left margin */
   padding-left:0; /* Remove the default left padding */
  }
  ol &gt; li {
   position:relative; /* Create a positioning context */
   margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
   padding:4px 8px; /* Add some spacing around the content */
   list-style:none; /* Disable the normal item numbering */
   border-top:0px solid #666;
   background:#f6f6f6;
  }
  ol &gt; li:before {
   content:counter(li); /* Use the counter as content */
   counter-increment:li; /* Increment the counter by 1 */
   /* Position and style the number */
   position:absolute;
   top:-2px;
   left:-2em;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   width:2em;
   /* Some space between the number and the content in browsers that support
      generated content but not positioning it (Camino 2 is one example) */
   margin-right:8px;
   padding:4px;
   border-top:0px solid #666;
   color:#fff;
   background:#666;
   font-weight:bold;
   /* font-family:"Helvetica Neue", Arial, sans-serif; */
   text-align:center;
  }
  li ol,
  li ul {margin-top:6px;}
  ol ol li:last-child {margin-bottom:0;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;ol class="tab-ol"&gt;
  &lt;li&gt;This is article number one for this month&lt;/li&gt;
  &lt;li&gt;This is article number one for this month&lt;/li&gt; 
  &lt;li&gt;This is article number one for this month&lt;/li&gt;
  &lt;li&gt;This is article number one for this month&lt;/li&gt;
  &lt;/ol&gt; 
  &lt;/div&gt;
  &lt;p&gt;ANOTHER LIST WITH HIDDEN NUMBER&lt;/p&gt;
  &lt;div class="wrapper"&gt;
  &lt;ol class="tab-ol ol-2"&gt;
  &lt;li&gt;This is article number one for this month&lt;/li&gt;
  &lt;li&gt;This is article number one for this month&lt;/li&gt; 
  &lt;li&gt;This is article number one for this month&lt;/li&gt;
  &lt;li&gt;This is article number one for this month&lt;/li&gt;
  &lt;/ol&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>