Text 文本

使用场景

用于展示行内文本。

示例

基本示例

(note) In love with Hippo(body) In love with Hippo(subtitle) In love with Hippo(title) In love with Hippo(subheader) In love with Hippo(header) In love with Hippo

inline

() => ( <Flex spacing="l" direction="column"> <Text fontSize="note">(note) In love with Hippo</Text> <Text fontSize="body" color="#FF0000"> (body) In love with Hippo </Text> <Text fontSize="subtitle">(subtitle) In love with Hippo</Text> <Text fontSize="title">(title) In love with Hippo</Text> <Text fontSize="subheader">(subheader) In love with Hippo</Text> <Text fontSize="header">(header) In love with Hippo</Text> </Flex> )

() => (
  <Flex spacing="l" direction="column">
    <Text fontSize="note">(note) In love with Hippo</Text>
    <Text fontSize="body" color="#FF0000">
      (body) In love with Hippo
    </Text>
    <Text fontSize="subtitle">(subtitle) In love with Hippo</Text>
    <Text fontSize="title">(title) In love with Hippo</Text>
    <Text fontSize="subheader">(subheader) In love with Hippo</Text>
    <Text fontSize="header">(header) In love with Hippo</Text>
  </Flex>
)

文本截断

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

inline

() => ( <Box width="600px" border="solid" borderColor="line.primary"> <Text truncated> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </Text> </Box> )

() => (
  <Box width="600px" border="solid" borderColor="line.primary">
    <Text truncated>
      Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing
      layouts and visual mockups.
    </Text>
  </Box>
)

多行阶段

"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.

inline

() => ( <Box width="300px" p="l" border="solid" borderColor="line.primary"> <Text lineClamp={2}> "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> </Box> )

() => (
  <Box width="300px" p="l" border="solid" borderColor="line.primary">
    <Text lineClamp={2}>
      "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>
  </Box>
)

改变渲染元素

Italic
Underline
I18N
Citation
Deleted
Emphasis
Inserted
Ctrl + C
Highlighted
Strikethrough
Sample
_sub
^sup

inline

() => ( <Box> <Text as="i">Italic</Text> <br /> <Text as="u">Underline</Text> <br /> <Text as="abbr">I18N</Text> <br /> <Text as="cite">Citation</Text> <br /> <Text as="del">Deleted</Text> <br /> <Text as="em">Emphasis</Text> <br /> <Text as="ins">Inserted</Text> <br /> <Text as="kbd">Ctrl + C</Text> <br /> <Text as="mark">Highlighted</Text> <br /> <Text as="s">Strikethrough</Text> <br /> <Text as="samp">Sample</Text> <br /> <Text as="sub">sub</Text> <br /> <Text as="sup">sup</Text> </Box> )

() => (
  <Box>
    <Text as="i">Italic</Text>
    <br />
    <Text as="u">Underline</Text>
    <br />
    <Text as="abbr">I18N</Text>
    <br />
    <Text as="cite">Citation</Text>
    <br />
    <Text as="del">Deleted</Text>
    <br />
    <Text as="em">Emphasis</Text>
    <br />
    <Text as="ins">Inserted</Text>
    <br />
    <Text as="kbd">Ctrl + C</Text>
    <br />
    <Text as="mark">Highlighted</Text>
    <br />
    <Text as="s">Strikethrough</Text>
    <br />
    <Text as="samp">Sample</Text>
    <br />
    <Text as="sub">sub</Text>
    <br />
    <Text as="sup">sup</Text>
  </Box>
)

API

字段	描述
as	any
align	TextAlign
truncated	boolean 是否在容器内自动截断（单行展示）
lineClamp	number 最多展示的行数（超出截断）
className	string
style	CSSProperties
fontFamily	FontFamily
fontStyle	FontStyle
letterSpacing	LetterSpacing<0 | (string & {})>
textAlign	TextAlign
fontSize	string
fontWeight	FontWeight
lineHeight	StringOrNumber
color	Color
bg	Color
backgroundColor	Color
opacity	Opacity