Add maxRows to Text

[chrismohr]

This would be used to truncate multiline text for components like the weblink preview.

To do this would likely involve parsing the numeric portion of the lineHeight, and multiplying by the supplied value.

[unindented]

Even if you were to correctly calculate the height, how would you introduce the ellipsis?

[chrismohr]

I'm open to suggestions... I imagine we'd want to consult a designer.

Some options:

Maybe an offset one with a pseudo element?

Or maybe we could progressively enhance and use --webkit-line-clamp for browsers that support it.

Or maybe better would be a fade?

Like this:
https://medium.com/@hey.aaron/truncating-multi-line-content-in-fixed-height-containers-by-fading-7f8ab4635648

Or this:
https://css-tricks.com/text-fade-read-more/

[unindented]

We'll have to consult with @BrendanMcK and our designers, see which option is preferable.

[BrendanMcK]

My understanding is that since the clipping is purely visual, and the DOM still contains all the original text, a screenreader will still read out the full content. That's acceptable in most cases.

OTOH, if the content was significantly larger than the visible portion, we might want to ensure that the screenreader also only reads out text cropped to the same ballpark (ie doesn't need to crop at exact same character, just reads out roughly the same amount).

But if we're confident there won't be more than a few lines here anyhow, that's likely not an issue.