fix(Text): only break words if text can wrap (#6432)

Fixes #6427

Author: Lukas742

packages/main/src/components/Text/Text.cy.tsx

@@ -44,7 +44,7 @@ describe('Text', () => {
         {longText}
       </Text>
     );
-    cy.findByTestId('text').invoke('outerHeight').should('equal', 240);
+    cy.findByTestId('text').invoke('outerHeight').should('equal', 16);
     cy.mount(
       <Text data-testid="text" style={{ width: '300px' }} maxLines={1}>
         {longText}

packages/main/src/components/Text/Text.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
     children: { control: 'text' }
   },
   args: {
+    wrapping: true,
     children: `If "renderWhitespace" is set to true, there will be thirteen white spaces after this sentence.             Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`
   }
 } satisfies Meta<typeof Text>;

packages/main/src/components/Text/index.tsx

@@ -21,10 +21,14 @@ export interface TextPropTypes extends CommonProps {
   renderWhitespace?: boolean;
   /**
    * Defines whether the text wraps when there is not enough space.
+   *
+   * @detault true
    */
   wrapping?: boolean;
   /**
    * Limits the number of lines for wrapping texts.
+   *
+   * __Note:__ This prop only takes effect if the `wrapping` prop is set to `true`.
    */
   maxLines?: number;
   /**
@@ -64,11 +68,13 @@ const Text = forwardRef<HTMLSpanElement, TextPropTypes>((props, ref) => {
   useStylesheet(styleData, Text.displayName);
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
 
+  const applyMaxLines = typeof maxLines === 'number' && maxLines > 1;
+
   const classNameString = clsx(
     classNames.text,
-    wrapping === false && classNames.noWrap,
+    (wrapping === false || (typeof maxLines === 'number' && maxLines <= 1)) && classNames.noWrap,
     renderWhitespace && classNames.renderWhitespace,
-    typeof maxLines === 'number' && classNames.maxLines,
+    applyMaxLines && classNames.maxLines,
     hyphenated && classNames.hyphenated,
     className
   );
@@ -89,7 +95,12 @@ const Text = forwardRef<HTMLSpanElement, TextPropTypes>((props, ref) => {
   return (
     <span
       ref={ref}
-      style={{ '--_ui5wcr_maxLines': typeof maxLines === 'number' ? maxLines : undefined, ...style } as CSSProperties}
+      style={
+        {
+          '--_ui5wcr_maxLines': applyMaxLines ? maxLines : undefined,
+          ...style
+        } as CSSProperties
+      }
       className={classNameString}
       {...rest}
     >