溢出和分解文本的问题

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当屏幕是移动的时候，为什么word Shop都被打破了？怎么解决的？

• 截图：

​

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

#2我怎么能在顺风中隐藏卷轴？

Answer 1

#1 白色空间

为了阻止你的话被打断，你可以简单地使用白空间。

您可能希望在这里使用的类是whitespace-nowrap。您可以将其应用于整个文档，也可以简单地应用于特定的div：

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

#2 隐藏滚动条

若要隐藏滚动条，可以使用溢出。

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