CODEWITHSUNDEEP
tailwind-css
mxcdh
mxcdh

Reputation: 1161

problem with overflow and break-down text

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?

Upvotes: 2

Views: 2897

Answers (2)

Dmitry Bochok
Dmitry Bochok

Reputation: 71

2. Hide scrollbar

You can hide scrollbar by adding new class to your globals.css file:

@layer components {
  .scrollbar-hidden {
    @apply [scrollbar-width:_none];

    &::-webkit-scrollbar {
      @apply hidden;
    }
  }
}

Then simply apply it:

<div className="scrollbar-hidden"</div>

Upvotes: 0

ChenBr
ChenBr

Reputation: 2662

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

Upvotes: 5

Related Questions