How to avoid text wrap automatically when useing chakra ui tabs?

Question

I take reference from official document https://chakra-ui.com/docs/components/tabs

If I just set two <Tab />, text is on them same line that is what I want.

<Tab>Let text In the same horizontal line</Tab>
<Tab>Two</Tab>

But if I set a lot of <Tab />, Let text In the same horizontal line skip line automatically, I try to set wordBreak={"unset"} is not working, how do I fix the issue ?

Here is what I try:

<Stack>
      <Tabs position="relative" variant="unstyled">
        <TabList bg="pink" overflowX={"scroll"}>
          <Tab wordBreak={"unset"}>Let text In the same horizontal line</Tab>
          <Tab>Two</Tab>
          <Tab>Three</Tab>
          <Tab>Four</Tab>
          <Tab>Three</Tab>
          <Tab>Five</Tab>
          <Tab>Three</Tab>
          <Tab>Six</Tab>
          <Tab>Three</Tab>
          <Tab>Seven</Tab>
        </TabList>
        <TabIndicator
          mt="-1.5px"
          height="2px"
          bg="blue.500"
          borderRadius="1px"
        />
        <TabPanels>
          <TabPanel>
            <p>one!</p>
          </TabPanel>
          <TabPanel>
            <p>two!</p>
          </TabPanel>
          <TabPanel>
            <p>three!</p>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Stack>

Sandbox example:

https://codesandbox.io/p/devbox/twk7v6?file=%2Fpackage.json

Answer 1

It seems like you want to have all the elements in the same horizontal line without wrapping to the next line. To achieve this, you can set the CSS whiteSpace property to "nowrap" for the element. Here's how you can modify your code:

<Stack>
  <Tabs position="relative" variant="unstyled">
    <TabList bg="pink" overflowX={"scroll"} style={{ whiteSpace: 'nowrap' }}>
      <Tab wordBreak={"unset"}>Let text In the same horizontal line</Tab>
      <Tab>Two</Tab>
      <Tab>Three</Tab>
      <Tab>Four</Tab>
      <Tab>Three</Tab>
      <Tab>Five</Tab>
      <Tab>Three</Tab>
      <Tab>Six</Tab>
      <Tab>Three</Tab>
      <Tab>Seven</Tab>
    </TabList>
    <TabIndicator
      mt="-1.5px"
      height="2px"
      bg="blue.500"
      borderRadius="1px"
    />
    <TabPanels>
      <TabPanel>
        <p>one!</p>
      </TabPanel>
      <TabPanel>
        <p>two!</p>
      </TabPanel>
      <TabPanel>
        <p>three!</p>
      </TabPanel>
    </TabPanels>
  </Tabs>
</Stack>