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:

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/

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/