CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 8521

Overflow hidden without Width

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>

Upvotes: 1

Views: 2749

Answers (2)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

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>

Upvotes: 0

Nate
Nate

Reputation: 4948

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.)

Upvotes: 3

Related Questions