title: Truncate ellipsis without width
body: <p>I'm trying to achieve a responsive list width text-overflow: ellipsis; in the first cell that looks like this:</p>
  
  <p>A one-lined text that is too long and has to be... | Button 2 |</p>
  
  <p>The whole list should have width: 100%; to be as large as the device. I can't set a fixed width on Button 2  since the application is multilingual (a max-width should be possible though).</p>
  
  <p>I can try whatever I want, the ... only appears when I set a fixed width. How can I tell the middle cell to "use the space available" without the help of JavaScript?</p>
  
  <p><strong>Getting Output :</strong></p>
  
  <p>John Doe1       (2)
  John Doesdfsf...(3)
  Jo1             (4)</p>
  
  <p><strong>Expected output :</strong> </p>
  
  <p>John Doe1(2)
  John Doesdfsf...(3)
  Jo1(4)</p>
  
  <p>CSS:</p>
  
  <pre><code>.truncate-ellipsis {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; 
          -o-text-overflow: ellipsis;
           width: 20%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="validateCtrl"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;label class="truncate-ellipsis"&gt;{{title1}}&lt;/label&gt;({{count1}})&lt;/li&gt;
  &lt;li&gt;&lt;label class="truncate-ellipsis"&gt;{{title2}}&lt;/label&gt;({{count2}})&lt;/li&gt;
  &lt;li&gt;&lt;label class="truncate-ellipsis"&gt;{{title3}}&lt;/label&gt;({{count3}})&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/U3pVM/24330/" rel="noreferrer">DEMO</a></p>