Использование блочной модели для размещения элементов в родительском div

Следующее будет работать, если цена не станет шире:

http://jsfiddle.net/WDjZ3/4/

Я просто преобразовал margin-right в пиксели, чтобы знать пространство, занимаемое содержимым, кроме метки, а затем добавил максимальную ширину для остатка:

.label {   
    margin-right: 3px;  
    max-width: 294px;
}

если цена или изображение имеют переменную ширину, вам понадобится js, чтобы прочитать их ширину, удалить из 400 пикселей и добавить это значение к максимальной ширине.

Вот пример использования JavaScript для динамической установки максимальной ширины: http://jsfiddle.net/WDjZ3/7/

Я не проверял все размеры, поэтому их следует добавить, чтобы сделать их полностью точными, иначе из-за маржи цена больше не будет соответствовать.

Я в основном проверил ширину других элементов:

function getWidth(el) {   
    return parseInt(window.getComputedStyle(el,null).getPropertyValue("width"));
}

Затем я удалил эту ширину с 400 пикселей и установил maxWidth:

for (var i=0; i<imgs.length; i++) {
    var width = 400 - (getWidth(imgs[i]) + getWidth(currencies[i])) + "px"; 
    labels[i].style.maxWidth = width;
}

Я решил, что это работает без JavaScript. Однако он работает только в более современных браузерах, включая Chrome и Opera. В сафари не получится. Он будет работать в Firefox после обновления до последней спецификации. Я, вероятно, смогу заставить его работать в IE10, но я должен изучить это подробнее. Многоточие работает только в Chrome/Safari, поскольку зависит от поставщика.

Демонстрация находится по адресу http://jsfiddle.net/uLm92/1/.

Прежде всего, мы хотим сделать li контейнером flexbox и установить его на 400px, поэтому flex-элементы будут пытаться соответствовать этому размеру (подробнее об этом позже):

li {
    /* make all items inside li as flex items */
    display: -webkit-flex;
    display: flex;

    height: 40px;
    max-width: 400px;
 }

Теперь дочерние элементы являются гибкими элементами, ключом к тому, чтобы метка соответствовала размеру, является установка изображения и цены, чтобы они не были гибкими. Что касается цены, мы знаем, что она всегда должна быть шириной 40xp, поэтому я установил следующее:

.img {
    width: 40px;
    height: 40px;

    -webkit-flex-basis: 40px;
    flex-basis: 40px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
 }

Это говорит о том, что предпочтительнее использовать идентификатор 40px и никогда не уменьшать его.

Затем мы также хотим сообщить цене, чтобы она никогда не уменьшалась, а также центрировать анонимный блок (содержимое):

.currency {

    /* make anonymous box vertically centred */ 
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;
    align-items: center;

    /* make sure it never shrinks */ 
    -webkit-flex-shrink: 0;
   flex-shrink: 0;
}

Наконец, мы также хотим центрировать текст метки. Поскольку вам нужен хак с многоточием, я использовал старый синтаксис Flexbox для WebKit. Без использования старого flexbox свойство line-clamp не работает:

.этикетка {

/* need to use old flexbox for line-clamp to work
   it is a *horrible hack* */
display: -webkit-box;
display: flex;

-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow : hidden;
text-overflow: ellipsis;

-webkit-box-pack: center;
align-items: center; 

}

Поскольку два других элемента никогда не уменьшатся, элемент .label — единственный, который может это сделать, поэтому он уменьшается в размере, если не осталось места.