Fixes #61125
Amends #60890
See #60860

What?

#60890 broke the display of text that uses the Truncate component making words always 'breakable'. When the Truncate component forces text in one line, we still need to make sure 'unbreakable' text can break otherwise the -webkit-line-clamp CSS property will not work. However, when the Truncate component is set to force 2 or more lines, the text should not be forced to be 'breakable'.

Why?

When the Truncate component forces text in one line, we still need to make sure 'unbreakable' text can break otherwise the -webkit-line-clamp CSS property will not work. However, when the Truncate component is set to force 2 or more lines, the text should not be forced to be 'breakable'.

How?

Makes Truncate use word-break: break-all only when -webkit-line-clamp is 1.

Testing Instructions

• Repeat the reproduction instructions from the issue LinkControl: LInk preview buttons are off-view when the link text is a very long url #60860
• Observe long URls in the link preview are truncated.
• Observe the buttons 'Edit link', 'Remove link', and 'Copy link' are visible
• Open the block inserter.
• Search for blocks with long titles that go in two or 3 lines e.g. 'Table of Contents' or 'Comments Form' or 'Latest Comments'
• Observe the block titles don't have words that break in a new line.

Note: other places to optionally check are, for example, the filename of the Site Logo image, see screenshot:

or the filename of the background image of a Group block.

Notice in these cases the element rendered by the Truncate component already receives some more custom CSS rules including word-break: break-all because filenames, like URLs, can be very long and 'unbreakable'. We could consider to remove the custom word-break: break-all set on these elements to be more clean, but keeping it doesn't harm much.

Testing Instructions for Keyboard

Screenshots or screencast