Chakra UI：如何让多单词<Text>占满内容宽度而非折行？

要实现每个<Text>组件保持自身内容宽度、不折行且容器可横向滚动，需调整以下关键属性：

1. 移除Text的flex={1}：该属性会让Text组件拉伸填充可用空间，导致内容挤压或折行，不符合"占据自身内容宽度"的需求。
2. 强制Text不换行：给Text添加whiteSpace="nowrap"，确保多单词内容不会自动折行。
3. 禁止Text被压缩：设置flexShrink={0}，避免容器空间不足时Text被挤压变形。
4. 确保HStack不换行：给HStack添加flexWrap="nowrap"（部分UI库的HStack默认已开启，但显式设置更稳妥）。

修改后的代码如下：

<HStack
  spacing={1}
  overflowX={'scroll'}
  className={'hide-scrollbar'}
  flexWrap="nowrap"
>
  {traits.map((t) => (
    <Text 
      key={t}
      whiteSpace="nowrap"
      flexShrink={0}
    >
      {t},
    </Text>
  ))}
</HStack>

原理说明：

• whiteSpace="nowrap" 强制文本在一行显示，不会因长度自动折行。
• flexShrink={0} 告诉Flex布局系统，该Text组件不能被压缩，始终保持自身内容的宽度。
• flexWrap="nowrap" 确保HStack的所有子元素都在同一行排列，超出容器宽度时触发横向滚动。

内容的提问来源于stack exchange，提问作者ilmoi