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

Question

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

Answer 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/

Answer 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>