[@mantine/core] Text: Add truncate prop support (#3151)

* [docs] Fix typo (#3138)

* Update getLineClamp in Text.styles.ts to support 1 liner

* Remove getLineClamp update, create truncate param to Text component

* Fix for prettier test failing

Co-authored-by: Sajarin M <68892162+Sajarin-M@users.noreply.github.com>
Co-authored-by: Paul Moss <paulmoss06@gmail.com>

src/mantine-core/src/Text/Text.styles.ts

@@ -12,6 +12,7 @@ export interface TextStylesParams {
   variant: 'text' | 'link' | 'gradient';
   size: MantineNumberSize;
   lineClamp: number;
+  truncate: boolean;
   inline: boolean;
   inherit: boolean;
   underline: boolean;
@@ -74,6 +75,18 @@ function getLineClamp(lineClamp: number): CSSObject {
   return null;
 }
 
+function getTruncate(truncate: boolean): CSSObject {
+  if (truncate) {
+    return {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    };
+  }
+
+  return null;
+}
+
 export default createStyles(
   (
     theme,
@@ -82,6 +95,7 @@ export default createStyles(
       variant,
       size,
       lineClamp,
+      truncate,
       inline,
       inherit,
       underline,
@@ -100,6 +114,7 @@ export default createStyles(
         ...theme.fn.fontStyles(),
         ...theme.fn.focusStyles(),
         ...getLineClamp(lineClamp),
+        ...getTruncate(truncate),
         color: getTextColor({ color, theme, variant }),
         fontFamily: inherit ? 'inherit' : theme.fontFamily,
         fontSize:

src/mantine-core/src/Text/Text.tsx

@@ -35,6 +35,9 @@ export interface TextProps extends DefaultProps {
   /** CSS -webkit-line-clamp property */
   lineClamp?: number;
 
+  /** CSS truncate overflowing text with an ellipsis */
+  truncate?: boolean;
+
   /** Sets line-height to 1 for centering */
   inline?: boolean;
 
@@ -71,6 +74,7 @@ export const _Text = forwardRef<HTMLDivElement, TextProps>((props, ref) => {
     align,
     variant,
     lineClamp,
+    truncate,
     gradient,
     inline,
     inherit,
@@ -90,6 +94,7 @@ export const _Text = forwardRef<HTMLDivElement, TextProps>((props, ref) => {
       color,
       size,
       lineClamp,
+      truncate,
       inline,
       inherit,
       underline,