Многоточие текста CSS при использовании переменных ширины

Мне интересно, есть ли какой-либо способ иметь текст в плавающем многоточии коэффициента усиления div, когда родительский div и соседний div не оставляют достаточно места. Например:

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

Если я закрою окно браузера, родительский div рухнет, тогда пустое пространство в text-div исчезнет, но когда места больше нет, многоточие никогда не сработает.

Единственное, что я могу подумать, это вызвать событие, когда окно изменяет размеры и динамически установить новую фиксированную ширину для text-div, но это просто кажется не элегантным, особенно с учетом отступов и других соседних артефактов, которые мне нужно вычесть, чтобы получить правильная ширина.

Есть мысли по этому поводу?

Вот демонстрация jsFiddle:http://jsfiddle.net/Blender/kXMz7/

Ответы на вопрос(2)

Ваш ответ на вопрос