title: CSS overflow ellipsis only on first element
body: <p>I am trying to do it so for each line the "place" is always shown. However I want the title to be the one which has the ellipsis when the content is too long. </p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;ul class="results"&gt;
     &lt;li class="item"&gt; &lt;span class="title"&gt;&lt;a href="item.html" target="_blank"&gt;The numbers in the table specify the first browser version that fully supports the property&lt;/a&gt;&lt;/span&gt;&lt;span class="place"&gt;Place&lt;/span&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  
  .item {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/m6krvapf/5/" rel="nofollow">http://jsfiddle.net/m6krvapf/5/</a></p>
  
  <p>The trouble is it is the end of the line which is cut off, which means the "place" is cut off first. Is it possible to kepe the place there always and only put the ellipsis on the content to the left of it?</p>