CSS text ellipsis when using variable width divs

Question

I'm wondering if there is any way do have text in a floating div gain ellipsis when the parent div and neighboring div don't allow enough room. For example:

<style>
.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.icon-div {
    float: left;
}
</style>
<div class="parent-div">
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
  <div class="icon-div">X</div>
</div>

So far if I crunch the browser window, the parent div will collapse, then the white space in text-div will vanish, but when there is no more room, the ellipsis never kick in.

The only thing I can think to do is trigger an event when the window resizes and dynamically set a new fixed width on text-div, but this just feels inelegant, especially considering padding and other neighboring artifacts I'd have to subtract out to get a proper width.

Any thoughts on this one?

Here's a jsFiddle demo: http://jsfiddle.net/Blender/kXMz7/

Scutter

If you don't care about supporting older browsers, you can use flexbox to make this pretty simple: jsfiddle.net/Blender/kXMz7/1 – Paba

That works perfect Blender! I'm actively not supporting older browsers, so that works well. :) Apparently it doesn't work when put inside a table, but I can work around that. Thanks! If you post your answer separately, I'll mark it as the right one. – Scutter

Answer 1

You can use CSS3's flexible box layout to do this pretty intuitively:

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    

    min-width: 0;
}

.icon-div {
    flex: 1;
}​

Demo: http://jsfiddle.net/Blender/kXMz7/1/

Paba

+1 as the solution works perfectly. Although be aware that Flexible Box Layout is is still at Candidate Recommendation stage and is not widely supported. It will work in chrome, firefox, safari with vendor prefix. Internet Explorer only started supporting this feature in IE10. caniuse.com/flexbox – Hardcastle

Didn't work for me. I did get it to work with your code by modifying it. I set the width of the div used for the text to 0. – Cuneal

Thanks. This replicates a similar problem I'm facing with flex layout and ellipsis. The issue is this snippet doesn't work on Safari on iOS (I'm trying iOS 11.4). – Bahrain

Answer 2

My company does not support CSS3 yet, but I was able to solve the problem with another solution. By applying the float attribute only to the icon div and putting it first in the HTML, the other div will stay vertically aligned while also truncating when there is not enough room.

Examples: (icon on right) http://jsfiddle.net/qftWN/, (icon on left) http://jsfiddle.net/Nr2NN/

Disillusion

Interestingly, this DOES require that the floating element comes first before the truncated div – Kroon