Cannot find a way to have ellipsis and width of content at the same time

Question

I am using Tailwind and I am making clearable chips for a filtering component.

I have a flex container and I need the chips inside to be the width of the content. But when the width is too small I want then to do an ellipsis.

<!-- Clearable chips section -->
<div class="flex flex-wrap">
  <div v-for="index in 5" class="flex gap-1 items-center">
    <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">
      A long inner text that should collapse into an ellipsis when screen is small
    </span>
  </div>
</div>

I have tried a few solutions but I either have the width corresponding to the content or the ellipsis but so far, never both.

Here is an example: https://play.tailwindcss.com/sY9oewBwBl

Answer 1

Apply min-width: 0 to the chip elements. This overrides the min-width: min-content that is applied to horizontal flex layout children.

<script src="https://unpkg.com/@tailwindcss/browser@4.0.8"></script>

<!-- Clearable chips section -->
<div class="w-lg border border-zinc-700 py-6 m-auto mt-6">
  <div class="flex flex-wrap gap-2">
    <div class="flex gap-1 items-center bg-amber-400 rounded-full p-4 min-w-0">
      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">
        A small text
      </span>
    </div>
    <div class="flex gap-1 items-center bg-amber-400 rounded-full p-4 min-w-0">
      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">
        A long inner text that should collapse into an ellipsis when screen is small
      </span>
    </div>
    <div class="flex gap-1 items-center bg-amber-400 rounded-full p-4 min-w-0">
      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">
        A long inner text that should collapse into an ellipsis when screen is small
      </span>
    </div>
    <div class="flex gap-1 items-center bg-amber-400 rounded-full p-4 min-w-0">
      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">
        A long inner text that should collapse into an ellipsis when screen is small
      </span>
    </div>
  </div>
</div>