Text with Divider in ChakraUI

December 17, 2022

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

In ChakraUI, I could do this:

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.