Text truncation doesn't behave consistently across browsers

[richardtagger]

Issue is how IE/EDGE handles truncation of inline-block items - it seems to treat them as a single character, so truncates the entire inline-block down to an ellipsis. If display: inline is used here, all's well. Firefox does similar - seems that Chrome is the outlier here.

More context:-

1. we use display: inline-block on because the browser will ignore line-height on inline elements if the nearest block-level ancestor has a larger line-height.
2. we also need display: inline-block on when we ellipse text with "maxWidth", it doesn't work on an inline element.
3. additionally, we use vertical-align: baseline to line up the baseline of text characters regardless of font-size, line-height, etc. BUT the browser says "nope" and forces vertical-align: bottom when overflow:hidden is added for maxWidth-ellipsed text. this throws off our vertical rhythm between different text on the same line, so we have rem vertical-align adjustments for these cases.
4. but i've found that these are not reliable across browsers, Safari will adjust adjacent text higher or lower so i'm sure IE/Edge also has some wonkiness.

long story short, we might want to rethink , possibly doing the following:

1. set to display: inline
2. remove the maxWidth option from , find a different way to ellipse complicated groups of inline text (like in our message byline)
3. just have to know that sized will match the vertical-align of its closest ancestor with a specified "textSize".