I have a page in my Ionic 2 application where I what a gird of items, where each item takes a single row.
A simplified example can be seen at this plkr
Looking at the first row, I have 3 columns (red, gray, and orange).
I want the first two columns to stay fixed width, and have the last column take up the rest of the row. If the text is too long, I just want it to truncate and show ellipsis (which I do using the style='white-space: nowrap; overflow: hidden;text-overflow: ellipsis
Now, if I shrink the width of the page, the last column moved to be under the other rows....
Is there a way to have this third column stay in the same row, and just show the ellipsis once it runs out of room there (ie like below...)? I have tried everything!


