Flexbox Adaptive Widths w/Truncation

65 Views Asked by At

I'm trying create a flexbox row of two string items of widely varying lengths, that truncate with ellipses when the strings can't fit.

Seems easy enough and works okay with:

.flex-parent {
  display: flex;
}

.flex-child {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 50%;
}

However, occasionally strings will be very short, such as 'N/A', and in that case I would like the other string in the pair to take up as much space as possible, which would exceed max-width: 50%.

The max-width of 50% is included to keep a very long string from shrinking at the same rate as a very short string. I.e., without it, it would truncate like this: N/... A very long string with lots of words...

Instead, ideal behavior would be that the two strings take up equal space when they are both longer than half of the parent container. However, when one is shorter than 50%, then that entire string is displayed while the other string takes up all of the remaining space.

Because the behavior depends on parent size & length of own string & length of the OTHER string, all of the built-in flex-basis, flex-grow/flex-shrink does not appear to help.

http://jsfiddle.net/ods1zpjy/

Anyone solved this before?

0

There are 0 best solutions below