title: How to truncate text of last item in horizontal ul list
body: <p>I have an HTML list as follows...</p>
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Some text&lt;/li&gt;
      &lt;li&gt;Some more text&lt;/li&gt;
      &lt;li&gt;Even more text&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>...and I'm using <code>display: inline-block;</code> to keep the list items on a single horizontal line.</p>
  <p>The <code>ul</code>'s <code>width</code> is limited and I want to truncate the last item using an ellipsis when it doesn't fit into that <code>width</code>.</p>
  <p>So needs to look something like:</p>
  <p><code>Some text   Some more text   Even mo...</code></p>
  <p>I've tried using <code>text-overflow: ellipsis;</code> on the <code>ul</code>, but to no effect.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }
  li {
    display: inline-block;
    margin-right: 10px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;Some text&lt;/li&gt;
    &lt;li&gt;Some more text&lt;/li&gt;
    &lt;li&gt;Even more text&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here's a <a href="http://jsfiddle.net/x018wrf7/" rel="nofollow noreferrer">fiddle</a></p>