Переполнение скрыто без ширины

Question

У меня есть одна строка, которая содержит две отдельные строки, foo и bar. Строка bar должна быть отображена и выровнена справа от box, а foo может быть усечена с помощью overflow:hidden;, если необходимо, чтобы сохранить одну строку текста. Строка текста, если ширина 200px.

Моя проблема в том, что я не уверен, как применить overflow:hidden; к элементу неуказанной ширины. Например, bar является динамическим значением. Так что для страницы A bar будет 50px, а страница B bar будет 150px. В результате я не могу записать width в foo, чтобы использовать overflow:hidden;.

В моем примере текст охватывает две строки, которые не являются поведением, которое я хочу. Текст должен помещаться внутри одной строки. Если текст слишком велик, то overflow:hidden; будет применен к foo, пока foo и bar не будут отображаться на одной строке.

http://jsfiddle.net/U3Lhg/

.box { overflow:hidden; height:30px; width:200px; background:red; } 
.foo { overflow:hidden; display:inline; background:aqua; } 
.bar { float:right; background:yellow;} 

<div class="box"> 
    <div class="foo">Cum sociis natoque</div> 
    <div class="bar">Lorem ipsum dolor</div> 
</div> 

Answer 1

Там относительно простой способ реализовать это, используя position: absolute подход, а не overflow: hidden подхода.

http://jsfiddle.net/U3Lhg/2/

.box { 
    border: 5px solid red; 
    width: 200px; 
    background: red; 
    position: relative; 
} 

.foo { 
    background: aqua; 

} 
.bar { 
    background: yellow; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

ли это удовлетворить ваши потребности, или есть другие причины, которые вы пытаетесь использовать overflow: hidden? (Если это так, вам понадобится JS.)