FunUi Framework

Use the "truncate" prop to limit the number of lines displayed in a text block. This is useful when you want to prevent long content from overflowing and maintain clean layouts. The text will end with ellipsis (...) when it exceeds the set number of lines.

React / Next.js

🔒

https://localhost:3000/preview

Loading preview...

1 Line

One-line truncation with ellipsis if text is too long to fit.

2 Lines

This text is much longer and will be truncated after two lines only. Additional content beyond that will not be shown and an ellipsis will appear at the end.

3 Lines

This example uses a lighter style and truncates after three lines. It is great for previews, summaries, or clipped paragraphs that shouldn't take up too much space.

localhost:3000

Text

The <Text /> is used to create text

Prop	Description	Value(s)
`id`	Sets the HTML id attribute for the element.	`string`
`text`	Text content rendered after children.	`ReactNode`
`children`	React children to render inside the Text component.	`ReactNode`
`funcss`	Custom class from FunUI or your own styles.	`string`
`bg`	Background color class name.	`string (e.g., "bg-primary", "bg-white")`
`color`	Text color class name.	`string (e.g., "primary", "dark", "white")`
`hoverBg`	Background color class on hover.	`string (e.g., "primary", "danger")`
`hoverText`	Text color class on hover.	`string (e.g., "primary", "danger")`
`monospace`	Applies monospace font style.	`boolean`
`emp`	Applies emphasis style.	`boolean`
`bold`	Renders the text in bold.	`boolean`
`block`	Renders as a block element instead of inline.	`boolean`
`body`	Applies body styling.	`boolean`
`article`	Applies article-style formatting.	`boolean`
`light`	Applies light text style.	`boolean`
`lighter`	Applies lighter text style.	`boolean`
`italic`	Applies italic styling.	`boolean`
`underline`	Underlines the text.	`boolean`
`quote`	Displays a quote icon before the text.	`boolean`
`align`	Applies text alignment via class.	`"left" \| "center" \| "right" \| "justify"`
`lineHeight`	Sets line height via inline style.	`string (e.g., "1.5", "2em")`
`letterSpacing`	Sets letter spacing via inline style.	`string (e.g., "0.05em", "1px")`
`uppercase`	Transforms text to uppercase.	`boolean`
`lowercase`	Transforms text to lowercase.	`boolean`
`capitalize`	Capitalizes the first letter of each word.	`boolean`
`textDecoration`	Sets the text decoration via inline style.	`"none" \| "underline" \| "overline" \| "line-through"`
`textTransform`	Sets text transform via inline style.	`"none" \| "capitalize" \| "uppercase" \| "lowercase"`
`whiteSpace`	Sets white space handling via inline style.	`"normal" \| "nowrap" \| "pre" \| "pre-line" \| "pre-wrap"`
`wordBreak`	Sets word breaking behavior via inline style.	`"normal" \| "break-all" \| "keep-all" \| "break-word"`
`fontFamily`	Sets the font family via inline style.	`string (e.g., "Arial", "Courier New")`
`textShadow`	Applies shadow to text via inline style.	`string (e.g., "2px 2px #ccc")`
`textAlign`	Applies text alignment via inline style.	`"left" \| "center" \| "right" \| "justify"`
`opacity`	Sets the opacity level of the text.	`number (e.g., 0.5, 1)`
`zIndex`	Sets the z-index for stacking context.	`number`
`transform`	Sets transform property via inline style.	`string (e.g., "rotate(5deg)")`
`customStyles`	Pass custom inline styles to the component.	`React.CSSProperties`
`truncate`	Limits the number of visible text lines and truncates the rest with an ellipsis (…).	`number`
`size`	Sets the text size using semantic .	`"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`
`size`	Sets the text size using semantic .	`"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`

Colors

Helpers