fix(ui5-text): provide more optimal truncation for single line text (#10794)

Author: dimovpetar

packages/main/cypress/specs/Text.cy.tsx

@@ -13,12 +13,28 @@ describe("Text", () => {
 
 	it("tests maxLines default behavior", () => {
 		cy.mount(<Text >Text</Text>);
-		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "none");
+		cy.get("[ui5-text]")
+			.should("have.css", "-webkit-box-orient", "vertical")
+			.should("have.css", "-webkit-line-clamp", "none");
 	});
 
-	it("tests maxLines", () => {
+	it("tests maxLines = 1", () => {
 		cy.mount(<Text maxLines={1}>Text</Text>);
-		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "1");
+
+		cy.get("[ui5-text]")
+			.should("have.css", "display", "inline-block")
+			.should("have.css", "overflow", "hidden")
+			.should("have.css", "text-overflow", "ellipsis")
+			.should("have.css", "white-space", "nowrap");
+	});
+
+	it("tests maxLines > 1", () => {
+		cy.mount(<Text maxLines={2}>Text</Text>);
+
+		cy.get("[ui5-text]")
+			.should("have.css", "overflow", "hidden")
+			.should("have.css", "-webkit-line-clamp", "2")
+			.should("have.css", "-webkit-box-orient", "vertical");
 	});
 
 	it("tests emptyIndicatorMode", () => {

packages/main/src/themes/Text.css

@@ -1,22 +1,26 @@
 :host {
-	display: inline-block;
 	max-width: 100%;
 	font-size: var(--sapFontSize);
 	font-family: var(--sapFontFamily);
 	color: var(--sapTextColor);
 	line-height: normal;
-	white-space: pre-line;
-	word-wrap: break-word;
 	cursor: text;
+	overflow: hidden;
+}
+
+:host([max-lines="1"]) {
+	display: inline-block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-:host([max-lines]) {
+:host(:not([max-lines="1"])) {
 	display: -webkit-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;
-	overflow: hidden;
 	white-space: normal;
+	word-wrap: break-word;
 }
 
 .empty-indicator-aria-label {