diff --git a/packages/main/cypress/specs/ExpandableText.cy.tsx b/packages/main/cypress/specs/ExpandableText.cy.tsx
index 18ef33e4e8cb..1a285ffa8aac 100644
--- a/packages/main/cypress/specs/ExpandableText.cy.tsx
+++ b/packages/main/cypress/specs/ExpandableText.cy.tsx
@@ -223,6 +223,74 @@ describe("ExpandableText", () => {
});
});
+ describe("CSS Inheritance", () => {
+ it("Text element inherits white-space from host", () => {
+ const text = "This is a very long text that should be displayed";
+
+ cy.mount(
+
+
+
+ );
+
+ cy.get("[ui5-expandable-text]")
+ .shadow()
+ .find(".ui5-exp-text-text")
+ .should("have.css", "white-space", "pre-wrap")
+ .and("have.css", "display", "inline");
+ });
+
+ it("Text element inherits white-space 'nowrap' from host", () => {
+ const text = "This is a very long text that should be displayed";
+
+ cy.mount(
+
+
+
+ );
+
+ cy.get("[ui5-expandable-text]")
+ .shadow()
+ .find(".ui5-exp-text-text")
+ .should("have.css", "white-space", "nowrap");
+ });
+
+ it("Popover and popover text inherit white-space, font-family, and font-size from host", () => {
+ const text = "This is a very long text that should be displayed";
+ const maxCharacters = 5;
+
+ cy.mount(
+
+
+
+ );
+
+ cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+
+ cy.get("@expTextShadow")
+ .find(".ui5-exp-text-toggle")
+ .realClick();
+
+ cy.get("[ui5-expandable-text]").then($host => {
+ const hostWhiteSpace = $host.css("white-space");
+ const hostFontFamily = $host.css("font-family");
+ const hostFontSize = $host.css("font-size");
+
+ cy.get("@expTextShadow")
+ .find(".ui5-exp-text-popover")
+ .should("have.css", "white-space", hostWhiteSpace)
+ .and("have.css", "font-family", hostFontFamily)
+ .and("have.css", "font-size", hostFontSize);
+
+ cy.get("@expTextShadow")
+ .find(".ui5-exp-text-popover-text")
+ .should("have.css", "white-space", hostWhiteSpace)
+ .and("have.css", "font-family", hostFontFamily)
+ .and("have.css", "font-size", hostFontSize);
+ });
+ });
+ });
+
describe("Empty Indicator", () => {
it("Should display empty indicator if text is empty and emptyIndicatorMode=On", () => {
cy.mount();
diff --git a/packages/main/src/ExpandableTextTemplate.tsx b/packages/main/src/ExpandableTextTemplate.tsx
index eee3966f882e..22c0e6a0d329 100644
--- a/packages/main/src/ExpandableTextTemplate.tsx
+++ b/packages/main/src/ExpandableTextTemplate.tsx
@@ -37,7 +37,7 @@ export default function ExpandableTextTemplate(this: ExpandableText) {
class="ui5-exp-text-popover"
onClose={this._handlePopoverClose}
>
- {this.text}
+ {this.text}