diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index 3a367dcf2e4..41517f39a22 100644
--- a/components/src/molecules/DropdownMenu/index.tsx
+++ b/components/src/molecules/DropdownMenu/index.tsx
@@ -330,7 +330,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                     >
                       <StyledText
                         desktopStyle="captionRegular"
-                        css={LINE_CLAMP_TEXT_STYLE(3)}
+                        css={LINE_CLAMP_TEXT_STYLE(3, true)}
                       >
                         {option.name}
                       </StyledText>
@@ -369,7 +369,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
 
 export const LINE_CLAMP_TEXT_STYLE = (
   lineClamp?: number,
-  title?: boolean
+  wordBreak?: boolean
 ): FlattenSimpleInterpolation => css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -377,7 +377,7 @@ export const LINE_CLAMP_TEXT_STYLE = (
   text-overflow: ellipsis;
   word-wrap: break-word;
   -webkit-line-clamp: ${lineClamp ?? 1};
-  word-break: ${title === true
+  word-break: ${wordBreak === true
     ? 'normal'
     : 'break-all'}; // normal for tile and break-all for a non word case like aaaaaaaa
 `
diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
index ac6bac171a3..54e79b0e520 100644
--- a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -125,7 +125,7 @@ export function DropdownStepFormField(
               >
                 <StyledText
                   desktopStyle="captionRegular"
-                  css={LINE_CLAMP_TEXT_STYLE(3)}
+                  css={LINE_CLAMP_TEXT_STYLE(3, true)}
                 >
                   {options[0].name}
                 </StyledText>