tailwind-css - 溢出和分解文本的问题

Question

我使用 tailwind-overflow，在右侧进行水平滚动。 我的代码示例如下:

  <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">