Skip to content

Instantly share code, notes, and snippets.

@bivainis
Last active December 15, 2015 08:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bivainis/1ea72d147088fb5864d8 to your computer and use it in GitHub Desktop.
Save bivainis/1ea72d147088fb5864d8 to your computer and use it in GitHub Desktop.
Variable column width with truncation, when one of the columns is of variable width. Using flexbox
//
// as seen on: http://jsfiddle.net/Blender/kXMz7/1/
// similar solution here: http://codepen.io/stefsullrew/pen/WvWWqJ/
// link above might solve issues with iOS
//
.parent-div {
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
.left-text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// works without this too?
min-width: 0;
}
.right-text-div {
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
text-align: right;
// white-space: nowrap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment