title: text-overflow ellipsis on one of two spans inside a wrapper
body: <p>I am having a problem with ellipsis. Here is my HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;span id="firstText"&gt;This text should be effected by ellipsis&lt;/span&gt;
      &lt;span id="lastText"&gt;this text should not change size&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to do this with pure css?
  Here is what I have tried:</p>
  
  <pre><code>#firstText
  {
      overflow: hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
  }
  
  #lastText
  {
      white-space:nowrap;
      overflow:visible;   
  }
  </code></pre>
  
  <p>This is how it is shown:</p>
  
  <p><em>This text should be effected by ellipsis this text shoul</em></p>
  
  <p>While this is the result I want:</p>
  
  <p><em>This text should be e...this text should not change size</em></p>