title: How to use ellipsis in responsive CSS table cell?
body: <p>I want to create something like this screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/wLnJf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wLnJf.png" alt="screenshot"></a></p>
  
  <p>I tried using table display when the numbers and text are table-cell and the circle is absolute position, but it seems like I can't use ellipsis on table-cell.</p>
  
  <p>My design is responsive so I can't use fixed width.</p>
  
  <p><a href="http://jsfiddle.net/yefoz02z/1/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="cell cell1"&gt;
          1
      &lt;/div&gt;
      &lt;div class="cell cell2"&gt;
          very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis
          very very long text that will need to be nowrap and with ellipsis
          very very long text that will need to be nowrap and with ellipsis
      &lt;/div&gt;
      &lt;div class="cell3"&gt;
          absolute 
      &lt;/div&gt;
  &lt;/div&gt;
  
  .wrapper{
      display: table;
      width: 100%;
  }
  .cell{
      display: table-cell;
  }
  .cell1{
      background: yellow;
  }
  .cell2{
      background: lightblue;
  }
  </code></pre>