Question 250087 in CSS Question posted in
Some basic documentation can be found here.

Css – 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">₹{"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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search