Эллипсис текста CSS при использовании переменных ширины divs

Мне интересно, есть ли какой-либо способ иметь текст в плюсе плюса с плюсом, когда родительский 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 скроется, тогда пустое пространство в тексте-div исчезнет, но когда нет больше места, эллипсис никогда не начнет.

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

Любые мысли об этом?

Здесь jsFiddle demo: http://jsfiddle.net/Blender/kXMz7/

Ответ 1

Вы можете использовать гибкую рамку в CSS3, чтобы сделать это довольно интуитивно:

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    

    min-width: 0;
}

.icon-div {
    flex: 1;
}

Демо: http://jsfiddle.net/Blender/kXMz7/1/

Ответ 2

Моя компания еще не поддерживает CSS3, но я смог решить проблему с другим решением. Применяя атрибут float только к значку div и помещая его сначала в HTML, другой div останется вертикально выровненным, а также усечением, когда места недостаточно.

Примеры: (значок справа) http://jsfiddle.net/qftWN/, (значок слева) http://jsfiddle.net/Nr2NN/