diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
index 1f772defcd2..7eac266505a 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
@@ -230,12 +230,14 @@ export default BaseChartComponent.extend({
     var node_id = data.get("id"),
         node_addr = encodeURIComponent(data.get("nodeHTTPAddress")),
         href = `#/yarn-node/${node_id}/${node_addr}/info`;
+    var nodeHostName = data.get("nodeHostName");
     var a = g.append("a")
       .attr("href", href);
     a.append("text")
-      .text(data.get("nodeHostName"))
+      .text(nodeHostName.length > 30 ? nodeHostName.substr(0, 30) + '...' : nodeHostName)
       .attr("y", yOffset + this.CELL_HEIGHT / 2 + 5)
-      .attr("x", xOffset + this.CELL_WIDTH / 2)
+      .attr("x", nodeHostName.length > 30 ? xOffset + 10 : xOffset + this.CELL_WIDTH / 2)
+      .style("text-anchor", nodeHostName.length > 30 ? "start" : "middle")
       .attr("class", this.isNodeSelected(data) ? "heatmap-cell" : "heatmap-cell-notselected");
     if (this.isNodeSelected(data)) {
       this.bindTP(a, rect);
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
index f68bba6b8bc..d1ac8e7a30f 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
@@ -25,4 +25,3 @@
     <select id="heatmap-select" class="form-control"></select>
   </div>
 </div>
-<p/>
\ No newline at end of file