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

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

.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.icon-div {
    float: left;
}


  This is text I'd like to truncate when space doesn't permit
  X

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

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

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

Вот'демоверсия jsFiddle:http://jsfiddle.net/Blender/kXMz7/