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;
}