diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index 71cc0fe38e..546b3b44bc 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -8,6 +8,7 @@ import * as d3 from 'd3';
 import Legend from './Legend';
 import Tooltip from './Tooltip';
 import ContentLoading from '../../components/ContentLoading';
+import { truncateString } from '../../util/strings';
 
 const Loader = styled(ContentLoading)`
   height: 100%;
@@ -75,6 +76,7 @@ function MeshGraph({ showLegend, zoom }) {
     const defaultNodeHighlightColor = '#16407C';
     const defaultNodeLabelColor = 'white';
     const defaultFontSize = '12px';
+    const labelMaxLen = 15;
     const getWidth = () => {
       let width;
       // This is in an a try/catch due to an error from jest.
@@ -245,7 +247,7 @@ function MeshGraph({ showLegend, zoom }) {
         healthy: '\u2713',
         error: '\u0021',
       };
-      return `${stateKey[nodeState]}  ${name}`;
+      return `${stateKey[nodeState]}  ${truncateString(name, labelMaxLen)}`;
     }
 
     function renderNodeType(nodeType) {
diff --git a/awx/ui/src/util/strings.js b/awx/ui/src/util/strings.js
index 2eee9bbe96..9fd250e450 100644
--- a/awx/ui/src/util/strings.js
+++ b/awx/ui/src/util/strings.js
@@ -17,3 +17,10 @@ export const stringIsUUID = (value) =>
   /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi.test(
     value
   );
+
+export const truncateString = (str, num) => {
+  if (str.length <= num) {
+    return str;
+  }
+  return `${str.slice(0, num)}...`;
+};