✨ fix(text): enhance Text component with additional styling properties

- Added new props to the Text component: `lineClamp`, `lineHeight`, `noWrap`, `textDecoration`, `textTransform`, `whiteSpace`, and `wordBreak` for improved text styling flexibility.
- Updated the documentation to reflect these new properties, enhancing clarity on their usage.
- Modified the component's internal styling logic to accommodate the new props, ensuring they work seamlessly with existing features like ellipsis.

This enhancement provides users with greater control over text presentation and layout.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

src/Text/Text.tsx

@@ -22,27 +22,49 @@ const Text: FC<TextProps> = ({
   underline,
   delete: deleteStyle,
   fontSize,
+  lineClamp,
+  lineHeight,
   mark,
   code,
   color,
   weight,
   ellipsis,
+  noWrap,
+  textDecoration,
+  textTransform,
+  whiteSpace,
+  wordBreak,
   ...rest
 }) => {
   const textRef = useRef<HTMLElement>(null);
   const isOverflow = useTextOverflow(textRef, ellipsis, children);
 
+  const isMultiEllipsis = typeof ellipsis === 'object' && !!ellipsis.rows && ellipsis.rows > 1;
   const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;
 
   const textStyle = {
     ...(color && { color }),
     ...(weight && { fontWeight: weight }),
+    ...(lineHeight && { lineHeight }),
+    ...(textTransform && { textTransform }),
+    ...(textDecoration && { textDecoration }),
+    ...(wordBreak && { wordBreak }),
     ...(typeof ellipsis === 'object' &&
       ellipsis.rows && {
         WebkitLineClamp: ellipsis.rows,
       }),
+    ...(!ellipsis &&
+      !!lineClamp && {
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: lineClamp,
+        display: '-webkit-box',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }),
     ...(fontSize && { fontSize }),
     ...(align && { textAlign: align }),
+    ...(!isMultiEllipsis && noWrap && { whiteSpace: 'nowrap' as const }),
+    ...(whiteSpace && { whiteSpace }),
     ...style,
   };
 
@@ -78,14 +100,18 @@ const Text: FC<TextProps> = ({
   );
 
   // 处理带有 tooltip 的省略
-  if (ellipsis && typeof ellipsis === 'object' && ellipsis.tooltip) {
+  if (
+    ellipsis &&
+    typeof ellipsis === 'object' &&
+    (ellipsis.tooltip || ellipsis.tooltipWhenOverflow)
+  ) {
     // 如果设置了 tooltipWhenOverflow，只在溢出时显示 tooltip
     if (tooltipWhenOverflow && !isOverflow) {
       return content;
     }
 
     const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;
-    if (typeof ellipsis.tooltip === 'object')
+    if (ellipsis.tooltip && typeof ellipsis.tooltip === 'object')
       return (
         <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>
           {content}

src/Text/demos/TooltipWhenOverflow.tsx

@@ -3,9 +3,9 @@ import { Text } from '@lobehub/ui';
 export default () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <div>Container width: 200px (text overflows, tooltip shown)</div>
+      <div>Container width: 200px (text overflows, tooltip shown; title defaults to children)</div>
       <div style={{ width: 200 }}>
-        <Text ellipsis={{ tooltip: true, tooltipWhenOverflow: true }}>
+        <Text ellipsis={{ tooltipWhenOverflow: true }}>
           This is a very long text that will overflow and show a tooltip when hovered.
         </Text>
       </div>
@@ -14,14 +14,14 @@ export default () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <div>Container width: 600px (text fits, no tooltip)</div>
       <div style={{ width: 600 }}>
-        <Text ellipsis={{ tooltip: true, tooltipWhenOverflow: true }}>Short text that fits.</Text>
+        <Text ellipsis={{ tooltipWhenOverflow: true }}>Short text that fits.</Text>
       </div>
     </div>
 
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <div>Multi-line ellipsis (2 rows, overflow detection)</div>
       <div style={{ width: 200 }}>
-        <Text ellipsis={{ rows: 2, tooltip: true, tooltipWhenOverflow: true }}>
+        <Text ellipsis={{ rows: 2, tooltipWhenOverflow: true }}>
           This is a very long text that spans multiple lines. It will be truncated after 2 rows and
           show a tooltip only when the content actually overflows.
         </Text>

src/Text/demos/index.tsx

@@ -24,14 +24,31 @@ export default () => {
         value: 1,
       },
       italic: false,
+      lineClamp: {
+        max: 10,
+        min: 1,
+        step: 1,
+        value: 0,
+      },
+      lineHeight: {
+        value: '',
+      },
       mark: false,
+      noWrap: false,
       strong: false,
+      textDecoration: {
+        value: '',
+      },
+      textTransform: {
+        options: ['', 'none', 'capitalize', 'uppercase', 'lowercase'],
+        value: '',
+      },
       tooltip: {
         render: (get) => get('ellipsis'),
         value: false,
       },
       tooltipWhenOverflow: {
-        render: (get) => get('ellipsis') && get('tooltip'),
+        render: (get) => get('ellipsis'),
         value: false,
       },
       type: {
@@ -43,6 +60,13 @@ export default () => {
         options: ['bold', 'bolder'],
         value: '',
       },
+      whiteSpace: {
+        value: '',
+      },
+      wordBreak: {
+        options: ['', 'normal', 'break-all', 'keep-all', 'break-word'],
+        value: '',
+      },
     },
     { store },
   ) as any;
@@ -61,6 +85,12 @@ export default () => {
                 }
               : undefined
           }
+          lineClamp={controls.lineClamp ? controls.lineClamp : undefined}
+          lineHeight={controls.lineHeight || undefined}
+          textDecoration={controls.textDecoration || undefined}
+          textTransform={controls.textTransform || undefined}
+          whiteSpace={controls.whiteSpace || undefined}
+          wordBreak={controls.wordBreak || undefined}
         >
           This is a very long text that will be truncated with ellipsis when it exceeds the
           container width. This is a very long text that will be truncated with ellipsis when it

src/Text/index.md

@@ -17,20 +17,27 @@ description: Text component is used to display text content with various styles
 
 ### Text
 
-| Property  | Description                    | Type                                                                | Default |
-| --------- | ------------------------------ | ------------------------------------------------------------------- | ------- |
-| as        | Custom element type            | `ElementType`                                                       | `'div'` |
-| type      | Text type                      | `'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'`       | -       |
-| color     | Custom text color              | `string`                                                            | -       |
-| weight    | Font weight                    | `'bold' \| 'bolder' \| number`                                      | -       |
-| disabled  | Whether the text is disabled   | `boolean`                                                           | `false` |
-| strong    | Whether the text is bold       | `boolean`                                                           | `false` |
-| italic    | Whether the text is italic     | `boolean`                                                           | `false` |
-| underline | Whether the text is underlined | `boolean`                                                           | `false` |
-| delete    | Whether the text is deleted    | `boolean`                                                           | `false` |
-| mark      | Whether the text is marked     | `boolean`                                                           | `false` |
-| code      | Whether the text is code       | `boolean`                                                           | `false` |
-| ellipsis  | Ellipsis configuration         | `boolean \| { rows?: number; tooltip?: ReactNode \| TooltipProps }` | -       |
+| Property       | Description                     | Type                                                                | Default |
+| -------------- | ------------------------------- | ------------------------------------------------------------------- | ------- |
+| as             | Custom element type             | `ElementType`                                                       | `'div'` |
+| type           | Text type                       | `'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'`       | -       |
+| color          | Custom text color               | `string`                                                            | -       |
+| weight         | Font weight                     | `'bold' \| 'bolder' \| number`                                      | -       |
+| disabled       | Whether the text is disabled    | `boolean`                                                           | `false` |
+| strong         | Whether the text is bold        | `boolean`                                                           | `false` |
+| italic         | Whether the text is italic      | `boolean`                                                           | `false` |
+| lineClamp      | Clamp lines with CSS line-clamp | `number`                                                            | -       |
+| lineHeight     | Custom line height              | `CSSProperties['lineHeight']`                                       | -       |
+| underline      | Whether the text is underlined  | `boolean`                                                           | `false` |
+| delete         | Whether the text is deleted     | `boolean`                                                           | `false` |
+| mark           | Whether the text is marked      | `boolean`                                                           | `false` |
+| code           | Whether the text is code        | `boolean`                                                           | `false` |
+| noWrap         | Whether to disable wrapping     | `boolean`                                                           | `false` |
+| textDecoration | Custom text decoration          | `CSSProperties['textDecoration']`                                   | -       |
+| textTransform  | Custom text transform           | `CSSProperties['textTransform']`                                    | -       |
+| whiteSpace     | Custom white-space              | `CSSProperties['whiteSpace']`                                       | -       |
+| wordBreak      | Custom word-break               | `CSSProperties['wordBreak']`                                        | -       |
+| ellipsis       | Ellipsis configuration          | `boolean \| { rows?: number; tooltip?: ReactNode \| TooltipProps }` | -       |
 
 Additionally, Text inherits all properties from Ant Design's Typography.Text component.
 

src/Text/type.ts

@@ -1,4 +1,4 @@
-import type { ElementType, Ref } from 'react';
+import type { CSSProperties, ElementType, Ref } from 'react';
 
 import type { TooltipProps } from '@/Tooltip';
 import { DivProps } from '@/types';
@@ -19,10 +19,27 @@ export interface TextProps extends DivProps {
       };
   fontSize?: number | string;
   italic?: boolean;
+  /**
+   * Clamp lines with CSS line-clamp.
+   *
+   * Note: When `ellipsis` is provided, `ellipsis` takes precedence.
+   */
+  lineClamp?: number;
+  lineHeight?: CSSProperties['lineHeight'];
   mark?: boolean;
+  /**
+   * Whether to disable wrapping (set `white-space: nowrap`).
+   *
+   * Note: When multi-line ellipsis is enabled, it will be ignored.
+   */
+  noWrap?: boolean;
   ref?: Ref<HTMLDivElement>;
   strong?: boolean;
+  textDecoration?: CSSProperties['textDecoration'];
+  textTransform?: CSSProperties['textTransform'];
   type?: 'secondary' | 'success' | 'warning' | 'danger' | 'info';
   underline?: boolean;
   weight?: 'bold' | 'bolder' | number;
+  whiteSpace?: CSSProperties['whiteSpace'];
+  wordBreak?: CSSProperties['wordBreak'];
 }