Search code examples
htmlcssreactjstypescriptchakra-ui

Text with Divider in ChakraUI

I am using ChakraUI for one of my projects and I want to add a Text with Divider like this: Text with divider

In ChakraUI, I could do this: my way of text with divider

and code:

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

but I want to show the text in one line.

Although I could still use like this:

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

which will make the text in one line.

So I am wondering is there any way to show text in one line? as shown in the first example.

Solution

  • Perhaps try add whiteSpace: "nowrap" to Heading.

    A quick minimized demo: stackblitz

    Example:

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

    An optional gap={6} is also added on Flex here to create a small gap between the Heading and Divider, but can be customized to fit the use case.