html - suspensivos - texto desbordado css

puntos suspensivos de desbordamiento de texto en uno de los dos tramos dentro de una envoltura

Question

Estoy teniendo un problema con elipsis. Aquí está mi 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>

¿Hay una manera de hacer esto con css puro? Esto es lo que he intentado:

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

Así es como se muestra:

Este texto debe ser efectuado por puntos suspensivos este texto debería

Si bien este es el resultado que quiero:

Este texto debe ser e ... Este texto no debe cambiar de tamaño

Answer 1

Podrías fingirlo de esta manera: cambia tu span a div y cambia tu CSS:

#firstText
{
float: left;
width: 250px;
height: 20px;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#lastText
{
float: left;
white-space:nowrap;
overflow:visible;
}

Answer 2

Puede lograr esto cambiando el orden de sus intervalos y asignando al primer intervalo un derecho de flotación. De esa manera, no tiene que establecer un ancho para ninguno de sus elementos:

#firstText
{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#lastText
{
float:right;
white-space:nowrap;
}

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

Answer 3

Puedes dar width a tu #firstText esta manera:

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

Mira este ejemplo

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

Answer 4

Todavía hay un pequeño caso no manejado:

Cuando tiene un tamaño de envoltorio desconocido o dinámico y desea que el primer hijo ocupe todo el espacio disponible, excepto los puntos suspensivos, si aún es demasiado largo.

Aquí está mi solución usando las propiedades de flex CSS:

#wrapper{
display: inline-flex;
flex-flow:row nowrap;
max-width:100%; /* or width:100% if you want the spans to take all available space */
}
#firstText{
flex:1;
white-space:pre;
overflow: hidden;
text-overflow: ellipsis;
}
#lastText{
white-space:nowrap;
}