Truncate ellipsis without width
<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>