diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
index a93bea0728..9e657437e2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
@@ -95,7 +95,7 @@
                     <div id="read-only-output-port-source" class="setting hidden">
                         <div class="setting-name">From output</div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="read-only-output-port-name"></div>
+                            <div id="read-only-output-port-name" class="ellipsis"></div>
                         </div>
                     </div>
                     <div id="output-port-source" class="setting hidden">
@@ -107,21 +107,21 @@
                     <div id="input-port-source" class="setting hidden">
                         <div class="setting-name">From input</div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="input-port-source-name" class="label"></div>
+                            <div id="input-port-source-name" class="label ellipsis"></div>
                         </div>
                     </div>
                     <div id="funnel-source" class="setting hidden">
                         <div class="setting-name">From funnel</div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="funnel-source-name" class="label">funnel</div>
+                            <div id="funnel-source-name" class="label ellipsis" title="funnel">funnel</div>
                         </div>
                     </div>
                     <div id="processor-source" class="setting hidden">
                         <div class="setting-name">From processor</div>
                         <div class="setting-field connection-terminal-label">
                             <div id="processor-source-details">
-                                <div id="processor-source-name" class="label"></div>
-                                <div id="processor-source-type"></div>
+                                <div id="processor-source-name" class="label ellipsis"></div>
+                                <div id="processor-source-type" class="ellipsis"></div>
                             </div>
                         </div>
                     </div>
@@ -149,21 +149,21 @@
                     <div id="output-port-destination" class="setting hidden">
                         <div class="setting-name">To output</div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="output-port-destination-name" class="label"></div>
+                            <div id="output-port-destination-name" class="label ellipsis"></div>
                         </div>
                     </div>
                     <div id="funnel-destination" class="setting hidden">
                         <div class="setting-name">To funnel</div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="funnel-source-name" class="label">funnel</div>
+                            <div id="funnel-destination-name" class="label ellipsis" title="funnel">funnel</div>
                         </div>
                     </div>
                     <div id="processor-destination" class="setting hidden">
                         <div class="setting-name">To processor</div>
                         <div class="setting-field connection-terminal-label">
                             <div id="processor-destination-details">
-                                <div id="processor-destination-name" class="label"></div>
-                                <div id="processor-destination-type"></div>
+                                <div id="processor-destination-name" class="label ellipsis"></div>
+                                <div id="processor-destination-type" class="ellipsis"></div>
                             </div>
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
index 2bbd48010f..f7637a2031 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
@@ -24,7 +24,7 @@
                     <div class="setting">
                         <div id="read-only-connection-source-label" class="setting-name"></div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="read-only-connection-source"></div>
+                            <div id="read-only-connection-source" class="ellipsis"></div>
                         </div>
                     </div>
                     <div class="setting">
@@ -48,7 +48,7 @@
                     <div class="setting">
                         <div id="read-only-connection-target-label" class="setting-name"></div>
                         <div class="setting-field connection-terminal-label">
-                            <div id="read-only-connection-target"></div>
+                            <div id="read-only-connection-target" class="ellipsis"></div>
                         </div>
                     </div>
                     <div class="setting">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
index cdd8318f00..a0f6af7524 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
@@ -162,6 +162,7 @@ ul.links span.header-link-over {
 .ellipsis {
     white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .ellipsis.multiline {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
index 30487f9d9f..b18da8df9a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
@@ -46,7 +46,6 @@ div.connection-terminal-label {
 #relationship-names {
     padding: 2px;
     height: 150px;
-    width: 274px;
     overflow-y: auto;
     overflow-x: hidden; 
     border: 0 solid #cccccc;
@@ -61,7 +60,6 @@ div.available-relationship-container {
 #connection-configuration div.relationship-name {
     display: inline-block;
     line-height: normal;
-    width: 240px;
 }
 
 #connection-name-container {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
index 61d91096d4..ce944859f5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
@@ -35,11 +35,9 @@
     overflow-x: hidden;
     overflow-y: auto;
     padding: 2px 2px 0;
-    width: 274px;
 }
 
 #connection-details div.relationship-name {
     display: inline-block;
     line-height: normal;
-    width: 240px;
 }
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
index 6e82b5e2a7..34394913b3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
@@ -109,6 +109,7 @@ div.relationship-description {
 #run-duration-slider {
     margin-top: 5px;
     border-radius: 0;
+    margin-right: 2px;
 }
 
 #run-duration-slider .ui-slider-handle {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
index b9672a26d9..74fc03d0fd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
@@ -189,7 +189,7 @@ nf.ConnectionConfiguration = (function () {
 
             // populate the port information
             $('#input-port-source').show();
-            $('#input-port-source-name').text(inputPortName);
+            $('#input-port-source-name').text(inputPortName).attr('title', inputPortName);
 
             // populate the connection source details
             $('#connection-source-id').val(inputPortData.id);
@@ -244,8 +244,8 @@ nf.ConnectionConfiguration = (function () {
 
             // populate the source processor information
             $('#processor-source').show();
-            $('#processor-source-name').text(processorName);
-            $('#processor-source-type').text(processorType);
+            $('#processor-source-name').text(processorName).attr('title', processorName);
+            $('#processor-source-type').text(processorType).attr('title', processorType);
 
             // populate the connection source details
             $('#connection-source-id').val(processorData.id);
@@ -443,7 +443,7 @@ nf.ConnectionConfiguration = (function () {
             var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id;
 
             $('#output-port-destination').show();
-            $('#output-port-destination-name').text(outputPortName);
+            $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName);
 
             // populate the connection destination details
             $('#connection-destination-id').val(outputPortData.id);
@@ -482,8 +482,8 @@ nf.ConnectionConfiguration = (function () {
             var processorType = processorData.permissions.canRead ? nf.Common.substringAfterLast(processorData.component.type, '.') : 'Processor';
 
             $('#processor-destination').show();
-            $('#processor-destination-name').text(processorName);
-            $('#processor-destination-type').text(processorType);
+            $('#processor-destination-name').text(processorName).attr('title', processorName);
+            $('#processor-destination-type').text(processorType).attr('title', processorType);
 
             // populate the connection destination details
             $('#connection-destination-id').val(processorData.id);
@@ -1307,7 +1307,7 @@ nf.ConnectionConfiguration = (function () {
                     if (nf.CanvasUtils.isProcessGroup(source) || nf.CanvasUtils.isRemoteProcessGroup(source)) {
                         // populate the connection source details
                         $('#connection-source-id').val(connection.source.id);
-                        $('#read-only-output-port-name').text(connection.source.name);
+                        $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name);
                     }
 
                     // if the destination is a process gorup or remote process group, select the appropriate port if applicable
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
index cc01408b20..1479023fb3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
@@ -53,8 +53,8 @@ nf.ConnectionDetails = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 var processor = response.component;
-                var processorName = $('<div class="label"></div>').text(processor.name);
-                var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.'));
+                var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
+                var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
 
                 // populate source processor details
                 $('#read-only-connection-source-label').text('From processor');
@@ -64,8 +64,8 @@ nf.ConnectionDetails = (function () {
                 deferred.resolve();
             }).fail(function (xhr, status, error) {
                 if (xhr.status === 403) {
-                    var processorName = $('<div class="label"></div>').text(source.name);
-                    var processorType = $('<div></div>').text('Processor');
+                    var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name);
+                    var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
 
                     // populate source processor details
                     $('#read-only-connection-source-label').text('From processor');
@@ -90,7 +90,7 @@ nf.ConnectionDetails = (function () {
     var initializeSourceFunnel = function (groupId, groupName, source) {
         return $.Deferred(function (deferred) {
             $('#read-only-connection-source-label').text('From funnel');
-            $('#read-only-connection-source').append('funnel');
+            $('#read-only-connection-source').text('funnel').attr('title', 'funnel');
             $('#read-only-connection-source-group-name').text(groupName);
             deferred.resolve();
         }).promise();
@@ -114,7 +114,7 @@ nf.ConnectionDetails = (function () {
 
                 // populate source port details
                 $('#read-only-connection-source-label').text('From output');
-                $('#read-only-connection-source').text(source.name);
+                $('#read-only-connection-source').text(source.name).attr('title', source.name);
                 $('#read-only-connection-source-group-name').text(remoteProcessGroup.name);
 
                 deferred.resolve();
@@ -122,7 +122,7 @@ nf.ConnectionDetails = (function () {
                 if (xhr.status === 403) {
                     // populate source processor details
                     $('#read-only-connection-source-label').text('From output');
-                    $('#read-only-connection-source').append(source.name);
+                    $('#read-only-connection-source').text(source.name).attr('title', source.name);
                     $('#read-only-connection-source-group-name').text(source.groupId);
 
                     deferred.resolve();
@@ -145,7 +145,7 @@ nf.ConnectionDetails = (function () {
             if (groupId === source.groupId) {
                 // populate source port details
                 $('#read-only-connection-source-label').text('From input');
-                $('#read-only-connection-source').text(source.name);
+                $('#read-only-connection-source').text(source.name).attr('title', source.name);
                 $('#read-only-connection-source-group-name').text(groupName);
 
                 deferred.resolve();
@@ -159,7 +159,7 @@ nf.ConnectionDetails = (function () {
 
                     // populate source port details
                     $('#read-only-connection-source-label').text('From output');
-                    $('#read-only-connection-source').text(source.name);
+                    $('#read-only-connection-source').text(source.name).attr('title', source.name);
                     $('#read-only-connection-source-group-name').text(processGroup.name);
 
                     deferred.resolve();
@@ -167,7 +167,7 @@ nf.ConnectionDetails = (function () {
                     if (xhr.status === 403) {
                         // populate source processor details
                         $('#read-only-connection-source-label').text('From output');
-                        $('#read-only-connection-source').append(source.name);
+                        $('#read-only-connection-source').text(source.name).attr('title', source.name);
                         $('#read-only-connection-source-group-name').text(source.groupId);
 
                         deferred.resolve();
@@ -213,8 +213,8 @@ nf.ConnectionDetails = (function () {
                 dataType: 'json'
             }).done(function (response) {
                 var processor = response.component;
-                var processorName = $('<div class="label"></div>').text(processor.name);
-                var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.'));
+                var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
+                var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
 
                 // populate destination processor details
                 $('#read-only-connection-target-label').text('To processor');
@@ -224,8 +224,8 @@ nf.ConnectionDetails = (function () {
                 deferred.resolve();
             }).fail(function (xhr, status, error) {
                 if (xhr.status === 403) {
-                    var processorName = $('<div class="label"></div>').text(destination.name);
-                    var processorType = $('<div></div>').text('Processor');
+                    var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name);
+                    var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
 
                     // populate destination processor details
                     $('#read-only-connection-target-label').text('To processor');
@@ -250,7 +250,7 @@ nf.ConnectionDetails = (function () {
     var initializeDestinationFunnel = function (groupId, groupName, destination) {
         return $.Deferred(function (deferred) {
             $('#read-only-connection-target-label').text('To funnel');
-            $('#read-only-connection-target').append('funnel');
+            $('#read-only-connection-target').text('funnel').attr('title', 'funnel');
             $('#read-only-connection-target-group-name').text(groupName);
             deferred.resolve();
         }).promise();
@@ -274,7 +274,7 @@ nf.ConnectionDetails = (function () {
 
                 // populate source port details
                 $('#read-only-connection-target-label').text('To input');
-                $('#read-only-connection-target').text(destination.name);
+                $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
                 $('#read-only-connection-target-group-name').text(remoteProcessGroup.name);
 
                 deferred.resolve();
@@ -282,7 +282,7 @@ nf.ConnectionDetails = (function () {
                 if (xhr.status === 403) {
                     // populate source port details
                     $('#read-only-connection-target-label').text('To input');
-                    $('#read-only-connection-target').append(destination.name);
+                    $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
                     $('#read-only-connection-target-group-name').text(destination.groupId);
 
                     deferred.resolve();
@@ -305,7 +305,7 @@ nf.ConnectionDetails = (function () {
             if (groupId === destination.groupId) {
                 // populate destination port details
                 $('#read-only-connection-target-label').text('To output');
-                $('#read-only-connection-target').text(destination.name);
+                $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
                 $('#read-only-connection-target-group-name').text(groupName);
 
                 deferred.resolve();
@@ -319,7 +319,7 @@ nf.ConnectionDetails = (function () {
 
                     // populate destination port details
                     $('#read-only-connection-target-label').text('To input');
-                    $('#read-only-connection-target').text(destination.name);
+                    $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
                     $('#read-only-connection-target-group-name').text(processGroup.name);
 
                     deferred.resolve();
@@ -327,7 +327,7 @@ nf.ConnectionDetails = (function () {
                     if (xhr.status === 403) {
                         // populate source port details
                         $('#read-only-connection-target-label').text('To input');
-                        $('#read-only-connection-target').append(destination.name);
+                        $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
                         $('#read-only-connection-target-group-name').text(destination.groupId);
 
                         deferred.resolve();