diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
index ea435ed036b9b..9183806730fd6 100644
--- a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
+++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
@@ -707,7 +707,7 @@ export class ExperimentView extends Component {
                         ColumnSortByOrder.forEach((order) => {
                           sortOptions.push(
                             <Option
-                              key={metricKey}
+                              key={ExperimentViewUtil.middleTruncateKey(metricKey, 20)}
                               title={metricKey}
                               data-test-id={`sort-select-${metricKey}-${order}`}
                               value={`${ExperimentViewUtil.makeCanonicalKey(
@@ -732,7 +732,7 @@ export class ExperimentView extends Component {
                           sortOptions.push(
                             <Option
                               key={paramKey}
-                              title={paramKey}
+                              title={ExperimentViewUtil.middleTruncateKey(paramKey, 20)}
                               data-test-id={`sort-select-${paramKey}-${order}`}
                               value={`${ExperimentViewUtil.makeCanonicalKey(
                                 COLUMN_TYPES.PARAMS,
diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js
index f3d5ae993e8ab..ad07cdfe72dc2 100644
--- a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js
+++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js
@@ -273,6 +273,17 @@ export default class ExperimentViewUtil {
     return keyType + '.`' + keyName + '`';
   }
 
+  static middleTruncateKey(keyName, maxLen) {
+    if (keyName.length > maxLen) {
+        var firstPartLen = Math.floor((maxLen - 3) / 2)
+        var lastPartLen = maxLen - 3 - firstPartLen
+        return keyName.substring(0, firstPartLen) + '...' +
+            keyName.substring(keyName.length - lastPartLen, keyName.length)
+    } else {
+        return keyName
+    }
+  }
+
   static getExpanderHeader(cellType) {
     const CellComponent = `${cellType}`;
     return (