The CSS `text-align` property
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.
Props#
Text
composes the Box component, so you can
pass all Box
style props.
align
align
ResponsiveValue<TextAlign>
casing
casing
The CSS `text-transform` property
ResponsiveValue<TextTransform>
decoration
decoration
The CSS `text-decoration` property
ResponsiveValue<number | "blink" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | ... 185 more ... | "wavy">