47

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/

Blender
  • 289,723
  • 53
  • 439
  • 496
Anthony
  • 5,275
  • 11
  • 50
  • 86
  • 1
    If you don't care about supporting older browsers, you can use flexbox to make this pretty simple: http://jsfiddle.net/Blender/kXMz7/1/ – Blender Sep 29 '12 at 04:43
  • 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. – Anthony Sep 29 '12 at 21:20

2 Answers2

74

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/

Blender
  • 289,723
  • 53
  • 439
  • 496
  • 1
    +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. http://caniuse.com/flexbox – Michael Apr 16 '13 at 14:32
  • 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. – Johann Jul 23 '17 at 08:28
  • 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). – brabec Aug 09 '18 at 11:33
12

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/

Chase Sandmann
  • 4,795
  • 3
  • 30
  • 42