diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
index 9bf5219e3815..56546151d745 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
@@ -207,7 +207,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                 <div class="unset neutral-color">Empty string set</div>
             </ng-container>
             <ng-template #nonEmptyValue>
-                <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
+                <div
+                    class="tertiary-color font-medium truncate"
+                    [title]="value"
+                    *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
@@ -221,7 +224,7 @@ <h2 mat-dialog-title>FlowFile</h2>
     </ng-template>
     <ng-template #formatContentValue let-value let-title="title">
         <ng-container *ngIf="value != null; else nullValue">
-            <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
+            <div class="tertiary-color font-medium truncate" [title]="value" *ngIf="title == null; else valueWithTitle">
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index 4db0afd6668f..58d1c7539ad6 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -426,14 +426,13 @@ <h2 mat-dialog-title>Provenance Event</h2>
             </ng-container>
             <ng-template #nonEmptyValue>
                 <div
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                    class="tertiary-color font-medium truncate"
+                    [title]="value"
                     *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div
-                        class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                        [title]="title">
+                    <div class="tertiary-color font-medium truncate" [title]="title">
                         {{ value }}
                     </div>
                 </ng-template>
@@ -445,15 +444,11 @@ <h2 mat-dialog-title>Provenance Event</h2>
     </ng-template>
     <ng-template #formatContentValue let-value let-title="title">
         <ng-container *ngIf="value != null; else nullValue">
-            <div
-                class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                *ngIf="title == null; else valueWithTitle">
+            <div class="tertiary-color font-medium truncate" [title]="value" *ngIf="title == null; else valueWithTitle">
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
-                <div
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                    [title]="title">
+                <div class="tertiary-color font-medium truncate" [title]="title">
                     {{ value }}
                 </div>
             </ng-template>