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—asentence that contains all of the letters of the English alphabet. Owing toits 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—asentence that contains all of the letters of the English alphabet. Owing toits 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.