problem with overflow and break-down text

user_18366964 0
Viewed 97

I using tailwind-overflow, for horizontal scroll in right side. Bellow example of my code:

  <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 Why word Shop All was break, when screen is mobile? How fix is it?

#2 How I can hide scroll in tailwind?

tailwind-css
1 Answers

#1 Whitespace

In order to disable the breaking of your words, you can simply use Whitespace.

It looks like the class you might want to use here is whitespace-nowrap. You can either apply it to your whole document or simply to a specific div:

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

#2 Hide Scroll-bar

To hide the scrollbar you can use Overflow.

overflow-hidden will hide both horizontal and vertical scrollbars.

overflow-x-hidden will hide the horizontal scrollbar (which is what you need here).

overflow-y-hidden will hide the vertical scrollbar.

In your code it can be implemented this way:

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