diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index fa582dbe27c..60292bef87f 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -612,10 +612,10 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="A"
                       >
                         A
@@ -669,10 +669,10 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="B"
                       >
                         B
@@ -1082,10 +1082,10 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="A"
                       >
                         A
@@ -1139,10 +1139,10 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="B"
                       >
                         B
@@ -1813,10 +1813,10 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="A"
                       >
                         Column A
@@ -1870,10 +1870,10 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="B"
                       >
                         <div>
@@ -2263,10 +2263,10 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="A"
                       >
                         A
@@ -2320,10 +2320,10 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
                     >
                       <div
-                        class="euiDataGridHeaderCell__title"
+                        class="euiDataGridHeaderCell__innerTruncatedContent"
                         title="B"
                       >
                         B
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
index e2aa31679f0..0a69601b2e3 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -35,10 +35,10 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
           tabindex="-1"
         >
           <div
-            class="euiDataGridHeaderCell__content"
+            class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
           >
             <div
-              class="euiDataGridHeaderCell__title"
+              class="euiDataGridHeaderCell__innerTruncatedContent"
               title="columnA"
             >
               columnA
@@ -92,10 +92,10 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
           tabindex="-1"
         >
           <div
-            class="euiDataGridHeaderCell__content"
+            class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
           >
             <div
-              class="euiDataGridHeaderCell__title"
+              class="euiDataGridHeaderCell__innerTruncatedContent"
               title="columnB"
             >
               columnB
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
index 807a7f693d3..1eeb97c75af 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -39,10 +39,10 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
             tabindex="-1"
           >
             <div
-              class="euiDataGridHeaderCell__content"
+              class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
             >
               <div
-                class="euiDataGridHeaderCell__title"
+                class="euiDataGridHeaderCell__innerTruncatedContent"
                 title="columnA"
               >
                 columnA
@@ -96,10 +96,10 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
             tabindex="-1"
           >
             <div
-              class="euiDataGridHeaderCell__content"
+              class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
             >
               <div
-                class="euiDataGridHeaderCell__title"
+                class="euiDataGridHeaderCell__innerTruncatedContent"
                 title="columnB"
               >
                 columnB
diff --git a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
index bc3dcbe0364..bbe1a46519c 100644
--- a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
+++ b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
@@ -27,10 +27,10 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
       tabindex="-1"
     >
       <div
-        class="euiDataGridHeaderCell__content"
+        class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
       >
         <div
-          class="euiDataGridHeaderCell__title"
+          class="euiDataGridHeaderCell__innerTruncatedContent"
           title="someColumn"
         >
           someColumn
diff --git a/src/components/datagrid/body/header/_data_grid_header_row.scss b/src/components/datagrid/body/header/_data_grid_header_row.scss
index 014f2de6aee..bfe06a432a5 100644
--- a/src/components/datagrid/body/header/_data_grid_header_row.scss
+++ b/src/components/datagrid/body/header/_data_grid_header_row.scss
@@ -53,27 +53,33 @@
     }
 
     .euiDataGridHeaderCell__content {
-      display: flex;
-      align-items: center;
+      @include euiTextTruncate;
+      overflow: hidden;
+      white-space: nowrap;
+      text-align: left;
       flex-grow: 1;
       align-self: baseline;
+
+      // this modifier is introduced for backwards compatability of the existing `euiDataGridHeaderCell__content` class
+      &--withInnerTruncation {
+        display: flex;
+        align-items: center;
+      }
     }
 
     &.euiDataGridHeaderCell--numeric,
     &.euiDataGridHeaderCell--currency {
-      .euiDataGridHeaderCell__content {
+      .euiDataGridHeaderCell__content--withInnerTruncation {
         justify-content: flex-end;
       }
     }
 
-    .euiDataGridHeaderCell__title {
+    .euiDataGridHeaderCell__innerTruncatedContent {
       @include euiTextTruncate;
-      overflow: hidden;
-      white-space: nowrap;
     }
 
-    .euiDataGridHeaderCell__content,
-    .euiDataGridHeaderCell__title,
+    .euiDataGridHeaderCell__content--withInnerTruncation,
+    .euiDataGridHeaderCell__innerTruncatedContent,
     .euiPopover {
       min-width: 0; // to make sure that title is truncated and all icons are still visible
     }
diff --git a/src/components/datagrid/body/header/data_grid_header_cell.tsx b/src/components/datagrid/body/header/data_grid_header_cell.tsx
index b3c6cfc5b56..74c5682ac58 100644
--- a/src/components/datagrid/body/header/data_grid_header_cell.tsx
+++ b/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -95,6 +95,23 @@ export const EuiDataGridHeaderCell: FunctionComponent<
     suffix: 'actions',
   });
 
+  const cellContent = (
+    <div
+      className={classnames(
+        'euiDataGridHeaderCell__content',
+        'euiDataGridHeaderCell__content--withInnerTruncation'
+      )}
+    >
+      <div
+        title={displayAsText || id}
+        className="euiDataGridHeaderCell__innerTruncatedContent"
+      >
+        {display || displayAsText || id}
+      </div>
+      {sortingArrow}
+    </div>
+  );
+
   return (
     <EuiDataGridHeaderCellWrapper
       {...displayHeaderCellProps}
@@ -115,13 +132,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<
 
       {!showColumnActions ? (
         <>
-          {sortingArrow}
-          <div
-            className="euiDataGridHeaderCell__content"
-            title={displayAsText || id}
-          >
-            {display || displayAsText || id}
-          </div>
+          {cellContent}
           {sortingScreenReaderText && (
             <EuiScreenReaderOnly>
               <p>{sortingScreenReaderText}</p>
@@ -147,15 +158,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<
                 }}
                 aria-describedby={`${sortingAriaId} ${actionsAriaId}`}
               >
-                <div className="euiDataGridHeaderCell__content">
-                  <div
-                    title={displayAsText || id}
-                    className="euiDataGridHeaderCell__title"
-                  >
-                    {display || displayAsText || id}
-                  </div>
-                  {sortingArrow}
-                </div>
+                {cellContent}
                 <div className="euiDataGridHeaderCell__icon">
                   <EuiIcon
                     type="boxesVertical"