悬停在侧边栏上时，文字显示为弯曲

Question

我正在使用脉轮UI。
悬停在侧边栏上的侧边栏向右扩展。
文字在向右的路上弯曲。
有什么办法可以在不弯曲字母的情况下扩大侧边栏？
如果有人可以帮助我理解，我将感谢您的帮助。

 <Flex
      background="blue.50"
      flexDirection="column"
      height="100vh"
      justifyContent="space-between"
      onMouseEnter={() => setState((prevState) => !prevState)}
      onMouseLeave={() => setState((prevState) => !prevState)}
      position="fixed"
      width={state ? "204px" : "44px"}
      zIndex={10}
      transition={"all .2s ease"}
    >
      <Box transition="all 0.3s">
        <HStack p={3}>
          <Flex alignItems="center">
            <Image
              display={state ? "none" : "inline-block"}
              height="24px"
              src={""}
              transition="all 0.3s ease-in-out"
            />
            <Image
              display={state ? "inline-block" : "none"}
              src={"chakra_logo.png"}
            />
          </Flex>
          <Text display={state ? "inline-block" : "none"} fontSize="xs">
            logo
          </Text>
        </HStack>
        <VStack mt={3} spacing={0}>
          <Box _hover={{ backgroundColor: "gray.200" }} width="full">
            <Link>
              <a>
                <HStack p={3}>
                  <BiSearchAlt />
                  <Text display={state ? "inline-block" : "none"}>
                    search Page
                  </Text>
                </HStack>
              </a>
            </Link>
          </Box>
        </VStack>
      </Box>
      <VStack mb={2} spacing={0}>
        <Box mb={2} px={3} width="full">
          <Divider borderColor="gray.300" />
        </Box>
        <Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
          <HStack>
            <Image src={""} width="24px" />
            <Text display={state ? "inline-block" : "none"}>
              My Page Setting
            </Text>
          </HStack>
        </Box>
      </VStack>
    </Flex>

Answer 1

为了防止文本包装，您可以添加whitespace =“ nowrap” and Overflow =“ hidden” props props props props props props props props ＆lt; text/＆gt; 元素。