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

Issue

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

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/

Answered By - sandeep