溢出和分解文本的问题

Question

我使用顺风溢出，用于右侧的水平滚动。我的代码的以下示例：

  <div className="bg-red-300">
        <div className="bg-red-400">
          <div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2  overflow-x-auto">
            <div className="flex space-x-2">
              <div>Explore:</div>
              <div className="font-bold underline">Shoes</div>
              <div className="font-bold underline">Clothing</div>
              <div className="font-bold underline">Accessories</div>
              <div className="font-bold underline">Premium</div>
              <div className="font-bold underline">Sport</div>
              <div className="font-bold underline">Shop All</div>
            </div>
          </div>
        </div>
      </div>

#1 为什么当屏幕是移动时，“Shop All”这个词就被破坏了？怎么修好呢？

• 截屏：
• 演示：https://superb-pothos-b7b687.netlify.app/tailwind-overflow

#2 如何隐藏顺风滚动？

Answer 1

#1 空白

为了禁用单词中断，您可以简单地使用Whitespace。

看起来您可能想在这里使用的类是whitespace-nowrap. 您可以将其应用于整个文档或仅应用于特定的 div：

  <div className="font-bold underline whitespace-nowrap">Shop All</div>

#2 隐藏滚动条

要隐藏滚动条，您可以使用Overflow。

overflow-hidden将隐藏水平和垂直滚动条。

overflow-x-hidden将隐藏水平滚动条（这就是您在这里需要的）。

overflow-y-hidden将隐藏垂直滚动条。

在您的代码中可以这样实现：

 <div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2  overflow-x-auto overflow-hidden">