title: dynamic width span with text overflow
body: <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>