From 32838e81a4d1e96da0c89226611ba43c527c7876 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 25 Jul 2024 12:24:43 +0200
Subject: [PATCH] DropdownMenuV2: break menu item help text on multiple lines
 for better truncation (#63916)

* DropdownMenuV2: break text menu item help text on multiple lines for better truncation

* CHANGELOG

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md                   | 4 ++++
 packages/components/src/dropdown-menu-v2/styles.ts | 1 +
 2 files changed, 5 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a05ebab3783b8..4a423eeb4a57d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `DropdownMenuV2`: break menu item help text on multiple lines for better truncation. ([#63916](https://github.com/WordPress/gutenberg/pull/63916)).
+
 ## 28.4.0 (2024-07-24)
 
 ### Deprecations
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 91a3aaeec1147..b36f69e62c509 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -344,6 +344,7 @@ export const DropdownMenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
 	color: ${ COLORS.gray[ '700' ] };
+	word-break: break-all;
 
 	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,
 	[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {