Zastanawiam się, czy istnieje jakikolwiek sposób, aby mieć tekst w elipsie zmiennego wzmocnienia div, gdy div div i sąsiednie div nie pozwalają wystarczająco dużo miejsca. Na przykład:

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

Do tej pory, jeśli przejrzę okno przeglądarki, div div będzie się zwijać, a białe spacje w text-div znikną, ale gdy nie ma już miejsca, elipsy nigdy się nie pojawią.

Jedyne, co mogę myśleć, to wywołać zdarzenie, gdy okno zmienia rozmiar i dynamicznie ustawia nową stałą szerokość na text-div, ale to po prostu wydaje się nieeleganckie, szczególnie biorąc pod uwagę dopełnianie i inne sąsiednie artefakty, które musiałbym odjąć, aby uzyskać odpowiednia szerokość.

Jakieś myśli na ten temat?

Oto demo jsFiddle:http://jsfiddle.net/Blender/kXMz7/