Text

Text is the used to render text and paragraphs within an interface.

Import#

import { Text } from '@chakra-ui/react'

Changing the font size#

To increase the font size of the text, you can pass the fontSize prop.

Truncate text#

If you'd like to truncate the text after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

// Basic version
<Text noOfLines={1}>
"The quick brown fox jumps over the lazy dog" is an English-language pangram—a
sentence that contains all of the letters of the English alphabet. Owing to
its existence, Chakra was created.
</Text>
// Responsive version
<Text noOfLines={[1, 2, 3]}>
"The quick brown fox jumps over the lazy dog" is an English-language pangram—a
sentence that contains all of the letters of the English alphabet. Owing to
its existence, Chakra was created.
</Text>

Override style#

You can change the entire style of the text via props. For example, to change the font size, pass the fontSize prop. No need to write css or styled().

Override the element#

To override the element that gets rendered, pass the as prop. Use Inspect Element to see the element that gets rendered in html.

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel