diff --git a/src/plugins/data_source_management/public/components/button_title.scss b/src/plugins/data_source_management/public/components/button_title.scss
new file mode 100644
index 000000000000..7857f08644f2
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/button_title.scss
@@ -0,0 +1,7 @@
+.buttonTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: auto;
+  max-width: 16ch;
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index 40a7edce7558..785368c2df6e 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -26,6 +26,7 @@ import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
+import '../button_title.scss';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -237,6 +238,7 @@ export class DataSourceSelectable extends React.Component<
           iconSide="left"
           size="s"
           disabled={this.props.disabled || false}
+          textProps={{ className: 'buttonTitle' }}
         >
           {this.state.selectedOption &&
             this.state.selectedOption.length > 0 &&