diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss
index 66f70c60228..53df31c2a46 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.scss
+++ b/packages/calcite-components/src/components/table-cell/table-cell.scss
@@ -26,7 +26,7 @@
}
td {
- @apply text-start focus-base align-middle text-color-1;
+ @apply text-start focus-base align-middle text-color-1 whitespace-normal;
background: var(--calcite-internal-table-cell-background);
border-inline-end: 1px solid var(--calcite-ui-border-3);
font-size: var(--calcite-internal-table-cell-font-size);
diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss
index bd167b5d4ea..c75490ef772 100644
--- a/packages/calcite-components/src/components/table-header/table-header.scss
+++ b/packages/calcite-components/src/components/table-header/table-header.scss
@@ -26,7 +26,7 @@
}
th {
- @apply text-color-1 focus-base text-start font-medium align-top;
+ @apply text-color-1 focus-base text-start font-medium align-top whitespace-normal;
font-size: var(--calcite-internal-table-cell-font-size);
border-inline-end: 1px solid var(--calcite-internal-table-header-border-color);
border-block-end: 1px solid var(--calcite-internal-table-header-border-color);
diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
index cf2fdd79ab1..036be615d02 100644
--- a/packages/calcite-components/src/components/table/table.stories.ts
+++ b/packages/calcite-components/src/components/table/table.stories.ts
@@ -715,6 +715,81 @@ export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_T
`;
+export const LongWrappingTextContent_TestOnly = (): string => html`
+
+
+
+
+
+
+
+ A slot for adding a calcite-action-bar or other components to display.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+ more calcite-table-row is selected.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+ more calcite-table-row is selected.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+ "none".
+
+
+ A slot for adding a calcite-action-bar or other components to display.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+ more calcite-table-row is selected.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+ more calcite-table-row is selected.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+ "none".
+
+
+ A slot for adding a calcite-action-bar or other components to display.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+ more calcite-table-row is selected.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+ more calcite-table-row is selected.
+ A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+ "none".
+
+
+ foot
+ foot
+ foot
+ foot
+
+`;
+
export const localized_TestOnly = (): string => html`