Многоточие текста 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/