Fix link control link preview when it displays long URLs. (#60890)

* Fix link control link preview when it displays long URLs. * Add changelog entry. * Fix changelot entry reference. Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
WordPress · Apr 19, 2024 · 8ff4af6 · 8ff4af6
1 parent 058cc37
commit 8ff4af6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -17,6 +17,8 @@
 
 ### Bug Fix
 
+-   `Truncate`: Fix link control link preview when it displays long URLs ([#60890](https://github.com/WordPress/gutenberg/pull/60890)).
+
 -   `ProgressBar`: Fix CSS variable with invalid value ([#60576](https://github.com/WordPress/gutenberg/pull/60576)).
 
 ### Experimental

diff --git a/packages/components/src/truncate/hook.ts b/packages/components/src/truncate/hook.ts
@@ -53,7 +53,11 @@ export default function useTruncate(
 		!! childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto;
 
 	const classes = useMemo( () => {
+		// The `word-break: break-all` property first makes sure a text line
+		// breaks even when it contains 'unbreakable' content such as long URLs.
+		// See https://github.com/WordPress/gutenberg/issues/60860.
 		const truncateLines = css`
+			word-break: break-all;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${ numberOfLines };
 			display: -webkit-box;