Fix link control link preview when it displays long URLs.

[afercia]

Fixes #60860

What?

The link control 'link preview' layout breaks when it displays long URLs. When this happens, the buttons in the link control are pushed to the right and aren't visible due to the hidden overflow. As such, the important UI controls aren't operable.

Why?

The layout breaks making some controls impossible to use.

How?

The Truncate is expected to truncate long text lines in the link preview. It does so by using the CSS property -webkit-line-clamp. However:

• The -webkit-line-clamp property works when some text breaks in two or more lines and then it limites the displayed lines to the specified value.
• As such, a line needs to break in more lines first for the -webkit-line-clamp property to have any effect.
• Long URLs are treated as 'unbreakable' text by browsers.
• The addition of the word-break: break-all CSS property makes sure that any text including long URLs break into more lines so that -webkit-line-clamp works as expected.

Testing Instructions

Testing Instructions for Keyboard

• 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

Screenshots or screencast

Before:

After:

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Mamaduka]

Thank you, @afercia!

[afercia]

Thank you @Mamaduka 👋🏽

[jasmussen]

This PR had an unintended side-effect of causing poor word-breaking in the inspector (#61277):

There's probably a larger question going on here, that would be good to answer. Basically: should the truncation truncate the text only, or also affect the wrapping of text? If the former, we should probably use word-break: break-word; rather than break-all.

Would it be possible to use break-word here instead of break-all? Is there a different way to fix the URL-issue? CC: @Mamaduka @ntsekouras

[jasmussen]

Looks like there's also some left-over CSS that addresses the issue even without adding word-break to the Text component:

[Mamaduka]

@afercia is working on an alternative fix in #61137.

[jasmussen]

Fantastic, thanks!

[afercia]

Looks like there's also some left-over CSS that addresses the issue even without adding word-break to the Text component:

For context: Yes, in some cases, some components do add a custom word-break: break-all declaration to the Truncate component because in some cases it's necessary to make long URLs 'breakable'. As far as I can tell, most of these cases are about long URLs of filenames. The alternative fix in #61137 should handle this a littl ebetter and make the 'ad-hoc' word-break: break-all no longer necessary.