diff --git a/awx/ui/client/src/network-ui/default.partial.svg b/awx/ui/client/src/network-ui/default.partial.svg
index 380fdd32a0..4484255fb9 100644
--- a/awx/ui/client/src/network-ui/default.partial.svg
+++ b/awx/ui/client/src/network-ui/default.partial.svg
@@ -49,8 +49,10 @@
           filter="url(#background)"
           text-anchor="middle"
           x="0"
-          y="73"> {{item.name}}
+          y="73"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+    </text>
+    <text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">
+         <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
     </text>
-    <text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">{{item.name}}{{item.edit_label?'_':''}}</text>
     </g>
 </g>
diff --git a/awx/ui/client/src/network-ui/host.partial.svg b/awx/ui/client/src/network-ui/host.partial.svg
index 86e5c875c2..f4bff2cb3c 100644
--- a/awx/ui/client/src/network-ui/host.partial.svg
+++ b/awx/ui/client/src/network-ui/host.partial.svg
@@ -77,13 +77,15 @@
             		c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
             </g>
         </g>
-        <g>
+        <g ng-show="item.icon || current_scale > 0.5">
             <text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__host-text--selected' : 'NetworkUI--hidden'}}"
                   filter="url(#background)"
                   text-anchor="middle"
                   x="0"
-                  y="50"> {{item.name}}
+                  y="50"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
+            <text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">
+                 <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
             </text>
-            <text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
         </g>
     </g>
diff --git a/awx/ui/client/src/network-ui/network.ui.app.js b/awx/ui/client/src/network-ui/network.ui.app.js
index 9ebe5f32f9..5fe046e5b0 100644
--- a/awx/ui/client/src/network-ui/network.ui.app.js
+++ b/awx/ui/client/src/network-ui/network.ui.app.js
@@ -19,6 +19,7 @@ var inventoryToolbox = require('./inventory.toolbox.directive.js');
 var debug = require('./debug.directive.js');
 var test_results = require('./test_results.directive.js');
 var awxNetworkUI = require('./network.ui.directive.js');
+var util = require('./util.js');
 
 export default
     angular.module('networkUI', [
@@ -27,6 +28,11 @@ export default
         networkDetailsDirective.name,
         networkZoomWidget.name
     ])
+    .filter('chunk', function () {
+        return function(input, size) {
+            return util.chunkSubstr(input, size);
+        };
+    })
     .controller('NetworkUIController', NetworkUIController.NetworkUIController)
     .directive('awxNetCursor', cursor.cursor)
     .directive('awxNetDebug', debug.debug)
diff --git a/awx/ui/client/src/network-ui/router.partial.svg b/awx/ui/client/src/network-ui/router.partial.svg
index 99a2606926..6e53d2d3b8 100644
--- a/awx/ui/client/src/network-ui/router.partial.svg
+++ b/awx/ui/client/src/network-ui/router.partial.svg
@@ -75,7 +75,10 @@
                   filter="url(#background)"
                   text-anchor="middle"
                   x="0"
-                  y="70"> {{item.name}}</text>
-            <text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
+                  y="70"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
+            <text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">
+                 <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
         </g>
     </g>
diff --git a/awx/ui/client/src/network-ui/switch.partial.svg b/awx/ui/client/src/network-ui/switch.partial.svg
index 65692d8101..44100b677a 100644
--- a/awx/ui/client/src/network-ui/switch.partial.svg
+++ b/awx/ui/client/src/network-ui/switch.partial.svg
@@ -77,7 +77,10 @@
                   filter="url(#background)"
                   text-anchor="middle"
                   x="0"
-                  y="70"> {{item.name}}</text>
-            <text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
+                  y="70"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
+            <text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">
+                 <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
+            </text>
         </g>
     </g>
diff --git a/awx/ui/client/src/network-ui/util.js b/awx/ui/client/src/network-ui/util.js
index f732f7bcf5..b46a95ed5b 100644
--- a/awx/ui/client/src/network-ui/util.js
+++ b/awx/ui/client/src/network-ui/util.js
@@ -180,3 +180,15 @@ function pCase(x, y, x1, y1, x2, y2) {
   return param;
 }
 exports.pCase = pCase;
+
+function chunkSubstr(str, size) {
+    const numChunks = Math.ceil(str.length / size);
+    const chunks = new Array(numChunks);
+
+    for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
+        chunks[i] = str.substr(o, size);
+    }
+
+    return chunks;
+}
+exports.chunkSubstr = chunkSubstr;