Eu estou querendo saber se existe alguma maneira de ter texto em uma div reta flutuante ganho elipse quando o pai div e vizinho div não permitem espaço suficiente. Por exemplo:

<style>
.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.icon-div {
    float: left;
}
</style>
<div class="parent-div">
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
  <div class="icon-div">X</div>
</div>

Até agora, se eu analisar a janela do navegador, o div pai entrará em colapso e, em seguida, o espaço em branco no div do texto desaparecerá, mas quando não houver mais espaço, as reticências nunca entram em cena.

A única coisa que posso pensar em fazer é disparar um evento quando a janela é redimensionada e definir dinamicamente uma nova largura fixa em text-div, mas isso parece deselegante, especialmente considerando o preenchimento e outros artefatos vizinhos que eu teria de subtrair para obter uma largura adequada.

Alguma idéia sobre isso?

Aqui está uma demonstração do jsFiddle:http://jsfiddle.net/Blender/kXMz7/