dynamic width span with text overflow
<p>I am having some issues trying to get <code>text-overflow: ellipsis</code> to work on a span where I don't have a fixed width. The span should expand according to the content, but if the content is larger than the space available, then the content should show ellipsis. Here is a link to <a href="https://jsfiddle.net/asgherqureshi/42khut93/" rel="nofollow">JSFiddle</a>.</p>

<p>The CSS and HTML:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    width: 50%;
    border: 1px solid black;
}

.wrapper {
    text-align: left;
}

.label {
    display: inline-block;
    margin-top: 10px;
    margin-right: 4px;
    padding: 0 8px;
    border-radius: 4px;
    color: white;
    background-color: grey;
    height: 20px;
    vertical-align: middle;
    font-size: 14px;
}

.content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="label"&gt;
            &lt;span class="content"&gt;text&lt;/span&gt;
        &lt;/div&gt; 
        &lt;div class="label"&gt;
            &lt;span class="content"&gt;longer text label&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="label"&gt;
            &lt;span class="content"&gt;Another label&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="label"&gt;
            &lt;span class="content"&gt;A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>