reactjs ChakraUI中带分隔符的文本

8ljdwjyq 于 2022-12-18 发布在 React

关注(0)|答案(1)|浏览(115)

我正在为我的一个项目使用ChakraUI，我想添加一个带有分隔符的文本如下：

在ChakraUI，我可以这样做：

和代码：

<Flex alignItems={"center"}>
    <Heading as="h4" size="lg">
          About the Department
    </Heading>
    <Divider border="4px" borderRadius={"2xl"} />
</Flex>

但我想在一行中显示文本。
虽然我仍然可以像这样使用：

<Flex alignItems={"center"}>
    <Heading as="h4" size="lg">
          About&nbsp;the&nbsp;Department
    </Heading>
    <Divider border="4px" borderRadius={"2xl"} />
</Flex>

这将使文本在一行中。
所以我想知道有没有办法在一行中显示文本？如第一个示例所示。

reactjs

来源：https://stackoverflow.com/questions/74832953/text-with-divider-in-chakraui

1条答案

按热度按时间

wh6knrhe1#

也许可以尝试将whiteSpace: "nowrap"添加到Heading。
快速最小化演示：stackblitz
示例：

<Flex alignItems="center" gap={6}>
  <Heading as="h4" size="lg" sx={{ whiteSpace: "nowrap" }}>
    About the Department
  </Heading>
  <Divider border="4px" borderRadius={"2xl"} />
</Flex>

在Flex上还添加了一个可选的gap={6}，以便在Heading和Divider之间创建一个小的差距，但可以进行定制以适应使用情形。

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs ChakraUI中带分隔符的文本

1条答案

相关问题

热门标签

最新问答