CODEWITHSUNDEEP
cssreactjstailwind-css
Praroop
Praroop

Reputation: 15

overflow: hidden; not working on my span containing dynamic text

I have a product card which has an image, name tag (span) and a price tag (h3):

export default function Product() {
  return (
    <div className="mx-auto">
      <div className="w-[160px] h-[160px] sm:w-[250px] sm:h-[250px] md:w-[320px] md:h-[320px] lg:w-[200px] lg:h-[200px] xl:w-[240px] xl:h-[240px] bg-gray-100 rounded-sm">
        <img
          className="hover:scale-110 transition ease-in-out 600ms"
          src={
            "img_src"
          }
          alt=""
        />
      </div>
      <span className=" text-ellipsis whitespace-nowrap overflow-hidden">
        {"data name"}
      </span>

      <h3 className="mt-2 text-gray-500">&#8377;{"data Price"}</h3>
    </div>
  );
}

the text-ellipsis and whitespace-nowrap seems to work fine but after that overflow-hidden makes no changes! I need help with this :(

I want my text to automatically hide when at the card's max width and add . . . at the end but it seems to get bugged somewhere that I can't understand.

Upvotes: 0

Views: 323

Answers (3)

Praroop
Praroop

Reputation: 15

Thanks a lot guys, i had to set display of my span to display: inline and use truncate and it worked. thanks for your help guys!

Upvotes: 0

Ahmed Abdelbaset
Ahmed Abdelbaset

Reputation: 4926

overflow: hidden only works with display: block, inline-block, flex, grid, and inline-flex with either fixed width or height e.g. width: 100px

Addon: In tailwindcss, there is a class truncate that applies all these classes you did.

Upvotes: 0

Wongjn
Wongjn

Reputation: 24333

As per the specification, overflow: hidden applies to only block containers, flex containers and grid containers. By default, <span> elements are neither of these.

Thus, you could consider using a "natural" block container, like <p> or <div>:

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="w-80">
  <div class="mx-auto">
    <div class="w-[160px] h-[160px] sm:w-[250px] sm:h-[250px] md:w-[320px] md:h-[320px] lg:w-[200px] lg:h-[200px] xl:w-[240px] xl:h-[240px] bg-gray-100 rounded-sm">
      <img class="hover:scale-110 transition ease-in-out 600ms" src="https://picsum.photos/320/320" alt="" />
    </div>
    <div class=" text-ellipsis whitespace-nowrap overflow-hidden">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu mauris, semper a ipsum fringilla, laoreet consectetur ante. Proin et luctus magna
    </div>

    <h3 class="mt-2 text-gray-500">&#8377;{"data Price"}</h3>
  </div>
</div>

Or otherwise, make the <span> one of the aforementioned containers by applying an appropriate display value. For example, block for a block container:

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="w-80">
  <div class="mx-auto">
    <div class="w-[160px] h-[160px] sm:w-[250px] sm:h-[250px] md:w-[320px] md:h-[320px] lg:w-[200px] lg:h-[200px] xl:w-[240px] xl:h-[240px] bg-gray-100 rounded-sm">
      <img class="hover:scale-110 transition ease-in-out 600ms" src="https://picsum.photos/320/320" alt="" />
    </div>
    <span class="block text-ellipsis whitespace-nowrap overflow-hidden">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu mauris, semper a ipsum fringilla, laoreet consectetur ante. Proin et luctus magna
    </span>

    <h3 class="mt-2 text-gray-500">&#8377;{"data Price"}</h3>
  </div>
</div>

Upvotes: 0

Related Questions