title: Using text-overflow ellipsis in middle of list items
body: <p>I am trying to implement HTML/CSS where there are four list items (<code>li</code>) within a full-width unordered list element (<code>ul</code>), but am struggling to get one of those items to use the <code>text-overflow:ellipsis</code> command.</p>
  
  <p>The result should be something along these lines...</p>
  
  <pre><code>+-------------------------------------------------------------------------------------------+
  | Item One | Item Two Two Two Two Two Two Two Two Two Two Two ...  | Item Three | Item Four |
  +-------------------------------------------------------------------------------------------+
  </code></pre>
  
  <p>The 1st, 3rd and 4th items are to be locked in position - with the 1st item on the left, and the 3rd and 4th items "locked" to the right hand side of the full-width area.</p>
  
  <p>The 2nd item should take all the remaining space, with <code>...</code> ellipsis on the overflow.</p>
  
  <p>This area will be used within a responsive design, and therefore will expand/shrink depending on the available screen area.</p>
  
  <p><em>All</em> four of the items will contain variable amounts of text, however the 2nd item will always have the most.  So the 1st, 3rd and 4th should always be fully visible... but the 2nd should hide what doesn't fit.</p>
  
  <p>This the the closest I've got (using two <code>ul</code> controls, floating the 3rd and 4th items on the right hand side), but as soon as I add the CSS for the 2nd item, it all goes wrong.  (By "wrong", I mean the 2nd item wraps onto the next line rather than staying on the same line and showing the <code>...</code>)</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>#leftul {
      width:100%;
  }
  #rightul {
      float:right;
  }
  ul {
      margin:0;
      padding:0;
  }
  li {
      list-style-type:none;
      display:inline-block;
      border:1px solid black;
  }
  #leftul #leftlarge {
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="rightul"&gt;
      &lt;li&gt;Item Three&lt;/li&gt;
      &lt;li&gt;Item Four&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="leftul"&gt;
      &lt;li&gt;Item One&lt;/li&gt;
      &lt;li id="leftlarge"&gt;Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anybody please suggest how this could be possible to acheive?</p>