Overflow hidden without Width

Question

I have one line that contains two separate strings, foo and bar . The entire bar string must be rendered and aligned to the right of box , while foo can be truncated via overflow:hidden; when necessary to preserve one line of text. The line of text if 200px wide.

My issue is that I am unsure how to apply overflow:hidden; to an element of unspecified width. For example, bar is a dynamic value. So for Page A bar is 50px while Page B bar will be 150px. As a result, I cannot hard code a width to foo to use overflow:hidden; .

In my example, the text spans over two lines which is not the behaviour I want. The text must fit inside one single line. If the text is too large, overflow:hidden; will be applied to foo until foo and bar will appear on one single line.

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

There's a relatively simple way to implement this using a position: absolute approach rather than an overflow: hidden approach.

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;
}

Would this meet your needs, or are there other reasons you're trying to use overflow: hidden ? (If so, you're going to need JS.)

Answer 2

Using flex and text-overflow properties of CSS

 .col { display: flex; justify-content: space-between; } .foo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 5px; background: aqua; } .bar { background: yellow; white-space: nowrap; padding: 0 5px; } 

 <div class="col"> <div class="foo"> Some long text Cum sociis natoque Cum sociis natoque Some long text Cum sociis natoque Cum sociis natoque </div> <div class="bar"> Lorem ipsum dolor </div> </div>