[EuiPageHeader] PageTitle missing truncation or word-wrap

[formgeist]

Summary

I noticed when page titles are very long, the rightSideItems are pushed out of the way, but perhaps there should be some maxWidth or character truncation for the PageTitle for these cases. Should we handle this case by case or implement something general in the component?

[elizabetdev]

I think we should implement something general in the component.

[elizabetdev]

We're running into this issue also in other components. For example, in a description list: https://codesandbox.io/s/dreamy-water-p4l5w?file=/index.js.

In the third example where we have a very long word, the solution was to add a className="eui-textBreakWord" to make the word break.

Because the EuiPageHeader pageTitle accepts a ReactNode do we want to by default truncate or just word-break: break-word; or is this something that the consumer should decide? And in EUI we just need to better document and point consumers to our CSS utility classes?

cc @cchaos @thompsongl

[cchaos]

This one is always a tough decision where EUI should be applying this type of word-wrap feature and where it's going to be on the consumer. The way it looks like a "bug" is actually how browsers handle it by default and most of the time it's up to the front-enders to understand when they'll need apply forced-wrapping. We tend to use truncation in EUI to handle cases where we know we want to restrict to a single line, but we can't know when context dictates that there might be a single really long word in places where normal text wrap occurs.

The problem always comes down to context. Would breaking that word in the middle somewhere actually make it appear incorrectly as separate words? Also, browsers don't do hyphens well/at all when forcing wrapping which again could lead to misleading interpretations of the full word, like a url. Basically in some cases, is breaking the word appropriate, or should it just horizontally scroll?

If we really want to get into the options of how to handle overflowing text we'd probably want to give consumers multiple options, but that's a lot to handle, which is why we've mostly relied on these CSS utilities so that consumers can make the choice. But at the same time it would be nice if EUI could at least ensure layouts don't break.

🤷 It's a hard decision. It could just mean more overflow-x: hidden properties plus better docs pointing to those CSS utilities.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

This was actually fixed by #5107 when we added the break-word mixin to all uses of EuiTitle.