Inline divs: shrink-wrap one, hide overflow on the other

Question

I have an interesting challenge in making two inline text elements behave in a particular way. Here are my parameters:

The main text on the left will vary in width, from about 30-60% of the parent width.
The supplementary text on the right will vary drastically from 20-120% of the parent width.
Parent width is responsive-ish and can shrink to 75% of its full width. Absolute positioning won't do.
Whenever both items don't fit, I want MAIN TEXT to remain fully visible (no ellipsis) and supplementary text to hide the overflow:
- overflow: hidden
- text-overflow: ellipsis

Both the CSS and HTML are completely available for modification, though I'd prefer if the HTML remained semantic. Feel free to use JS/jQuery if there's a nice way of doing it.

http://jsfiddle.net/gksfwozz/1/

.outer {
    width: 200px;
    background-color: skyblue;
    border: 3px solid skyblue;
    display: flex;
    justify-content: space-between;
}
.left {
    background-color: salmon;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right {
    background-color: blanchedalmond;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="outer">
    <div class="left">
        MAIN TEXT
    </div>
    <div class="right">
        additional info sdjkfhsdf 
    </div>
</div>

score 1 · Accepted Answer · answered Oct 08 '14 at 20:28

1

I changed your css a little bit. here is a fiddle

for .left I added float and max-width (as you sait it's up to 60% of the container) and I removed the overflow:hidden cause you want it fully always.

.left {
 background-color: salmon;
 white-space: nowrap;
 max-width: 60%;
 float: left;
}

and I remove the display:flex from .outter. I think it is what you want.

answered Oct 08 '14 at 20:28

Shirin Abdolahi

1,047
8
18

Very good! It does answer my question, though your slight modifications weren't what I was looking for. However, they're neither your fault nor relevant. Thanks for solving my problem! I'll give the answer to the other guy for answering 2 minutes before you :( – ivanjonas Oct 08 '14 at 20:39
it's ok,the important thing is you get what you wantet.but I was answer 2 mins before the other guy ! ;) right now my answer was answered 16 mins ago but his answer was answered 14 mins ago so I was first.but anyway ! @jonas.ninja ;) – Shirin Abdolahi Oct 08 '14 at 20:44
Right you are! I got my numbers confused. Awarded to you! – ivanjonas Oct 08 '14 at 20:55

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

.outer {
    width: 200px;
    background-color: skyblue;
    border: 3px solid skyblue;
    overflow:hidden;
}
.left {
    float:left;
    background-color: salmon;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right {
    background-color: blanchedalmond;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

What I have:
<div class="outer">
    <div class="left">
        MSGDFGDFGDFDFGDFGDFGDFG
    </div>
    <div class="right">
        adfhdfgh
    </div>
</div>

http://jsfiddle.net/gksfwozz/2/

from this link How to get these two divs side-by-side?

edited May 23 '17 at 12:11

Community

1
1

answered Oct 08 '14 at 20:30

Joseph Helfert

421
3
13

Excellent! Your embedded code doesn't seem to work very well, but the JSfiddle you linked doe the trick. Interesting to note that your answer is almost identical to the other guy's. – ivanjonas Oct 08 '14 at 20:40

Inline divs: shrink-wrap one, hide overflow on the other

2 Answers2