# Text
Good Text Format Shows Greate Web Content.
Home
/
Text 
import { Text } from "funuicss";
#
Font Size
Use size-related props like "xs", "sm", "base", "lg", "xl", "2xl", etc., to apply different font sizes.
React / Next.js
Extra Small Text
Small Text
Base Text
Large Text
Extra Large Text
2XL Text
3XL Text
4XL Text
5XL Text
#
Heading Element
Use the "heading" prop to render semantic HTML heading tags (h1 through h6). This is useful for SEO and proper structure.
React / Next.js
H1 - Light Weight
H2 - Emphasized
H3 - Default
H4 - Bold
H5 - Italic
H6 - Underlined
#
Truncate Text
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
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.