[Core/Typography] pt-text-overflow-ellipsis cuts off descenders for headers

[zfranklyn]

Bug report

• Package version(s): core 1.26.0
• Browser and OS versions: Chrome Version 61.0.3163.100 (Official Build) (64-bit), OSX 10.13 (17A365). Issue has also been replicated in Firefox 56.0 (64-bit) and Safari Version 11.0 (13604.1.38.1.6)

Steps to reproduce

1. Create any header (<h1><h2><h3><h4><h5> etc) containing text with a descender (a letter that 'descends' below the baseline, like 'y' or 'p')
2. Add the class name "pt-text-overflow-ellipsis"

For instance:

        <h3 className="pt-text-overflow-ellipsis">
          Glitter and be gay, that's the part I play...
        </h3>

Actual behavior

Letters with descenders are cut off ('g', 'p', 'y'):

Expected behavior

Letters with descenders should NOT be cut off. Docs specify that these text modifiers "can applied to any element that contains text", and are not only specific to <p> or <span> tags.

I believe this bug is due to the fact that Blueprint defines line-height for all header tags (see source code here), and when pt-text-overflow-ellipsis specifies overflow: hidden, the previously defined line-heights are no longer enough to show descenders.

One thought on how to fix this is: to specify a higher precedence line-height as part of pt-text-overflow-ellipsis. This would make the height of a truncated header different from a standard header, but we could probably play around with negative margin-bottoms to compensate.