diff --git a/packages/widget/src/components/common/dropdown/dropdown.ts b/packages/widget/src/components/common/dropdown/dropdown.ts
index 88ce21f9..aed72fdd 100644
--- a/packages/widget/src/components/common/dropdown/dropdown.ts
+++ b/packages/widget/src/components/common/dropdown/dropdown.ts
@@ -135,7 +135,7 @@ export class Dropdown extends BaseComponent {
       this.selectedOption,
       () =>
         html`${this.selectedOption!.icon || networkIconsMap.default}
-          <span part="optionName" class="optionName">
+          <span part="optionName" class="optionName optionNameEllipsis">
             ${capitalize(this.selectedOption!.name)}
           </span>`,
       () =>
@@ -156,7 +156,7 @@ export class Dropdown extends BaseComponent {
       () => customOptionHtml,
       () => html`
         ${icon || ''}
-        <span class="optionName">${capitalize(name)}</span>
+        <span class="optionName optionNameEllipsis">${capitalize(name)}</span>
       `
     );
   }
diff --git a/packages/widget/src/components/common/dropdown/styles.ts b/packages/widget/src/components/common/dropdown/styles.ts
index f871534e..5078c173 100644
--- a/packages/widget/src/components/common/dropdown/styles.ts
+++ b/packages/widget/src/components/common/dropdown/styles.ts
@@ -15,6 +15,7 @@ export const styles = css`
   }
 
   .dropdownTrigger {
+    white-space: nowrap;
     height: 100%;
     width: 100%;
     display: flex;
@@ -95,6 +96,8 @@ export const styles = css`
 
   .optionName {
     margin-left: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .dropdownLabel {