Эллипсис CSS в первом столбце в макете двух столбцов

Question

У меня есть строка, содержащая два блока текста. Я хочу, чтобы показать их бок о бок таким образом, чтобы:

• Первый блок совмещен с левого угла и обрезает при необходимости
• Второй блок совмещен с правом углу и отображает полностью
• Текст должен оставаться на одном линия
• Источник заказ не может быть изменен
• не может назначать фиксированную ширину к любому из этих блоков
• Поддержка IE8

Вот моя разметка:

<div style="background: #FC0; width: 200px; overflow: hidden;"> 
 
    <span style="background: #CF0; float: left;">Icicle River, Leavenworth, Washington, USA</span> 
 
    <span style="background: #F0C; float: right;">$1,000-$9,999</span> 
 
</div>

И ожидаемый выход

+-----------------------------------------------------+ 
|Icicle River, Leavenworth, Washingto... $1,000-$9,999| 
+-----------------------------------------------------+ 

Я имел успех, когда я rearran (сначала номер, площадь второй) и добавленные поплавки и переполнения. Однако мне не разрешено изменять порядок.

Answer 1

Возможно использование flexbox. Макет будет разбит в браузерах, которые не поддерживают flexbox, но в этих случаях вы можете реализовать некоторые резервные копии, чтобы хотя бы сделать результат презентабельным.

.container { 
 
    background: #FC0; 
 
    display: flex; 
 
    width: 200px; 
 
} 
 
.left { 
 
    background: #CF0; 
 
    flex-grow: 1; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 1%; 
 
} 
 
.right { 
 
    background: #F0C; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <span class="left">Icicle River, Leavenworth, Washington, USA</span> 
 
    <span class="right">$1,000-$9,999</span> 
 
</div>

JS Fiddle:http://jsfiddle.net/pr7dmj8z/2/