text-overflow ellipsis on one of two spans inside a wrapper

I am having a problem with ellipsis. Here is my HTML:

<div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

Is there a way to do this with pure css? Here is what I have tried:

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;   
}

This is how it is shown:

This text should be effected by ellipsis this text shoul

While this is the result I want:

This text should be e...this text should not change size

Solution 1:

You can give width to your #firstText like this :

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

Check this example

http://jsfiddle.net/Qhdaz/5/

Solution 2:

You could achieve this by changing the order of your spans and give the first span a float right. That way you don't have to set a width to any of your elements:

#firstText
{ 
  font-size: 30px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lastText
{ 
  color:red;
  font-size:30px;
  float:right;
  white-space:nowrap;
}

<div id="wrapper">
    <span id="lastText">this text must be shown in full</span>
    <span id="firstText">This text may be cropped</span>
</div>