Tailwind筛选组件可清除芯片：如何同时实现内容宽度与省略号？

直接上可行方案，核心是修正省略号的Tailwind类，同时给芯片容器和文本元素设置合适的flex属性：

<!-- Clearable chips section -->
<div class="flex flex-wrap gap-2">
  <div v-for="index in 5" class="flex items-center gap-1 min-w-[80px] max-w-full flex-shrink-1 bg-gray-100 px-2 py-1 rounded-full">
    <span class="whitespace-nowrap overflow-hidden text-ellipsis flex-1">
      A long inner text that should collapse into an ellipsis when screen is small
    </span>
    <button class="text-gray-500 hover:text-gray-700">×</button>
  </div>
</div>

关键调整说明： #

• 修正省略号类：把原来的overflow-ellipsis改成Tailwind正确的text-ellipsis，这是触发省略号的必备类
• 芯片容器设置：
  • min-w-[80px]：给芯片设个最小宽度，避免缩得太窄看不清内容
  • max-w-full：确保芯片不会超出父容器的宽度
  • flex-shrink-1：允许芯片在容器空间不足时自动收缩
• 文本span设置：
  • flex-1：让文本占满芯片内部的可用空间，这样容器收缩时文本会被挤压，触发省略号
  • 保留whitespace-nowrap和overflow-hidden，和text-ellipsis配合实现单行省略效果

额外加了bg-gray-100 px-2 py-1 rounded-full来模拟标准芯片样式，你可以根据自己的设计调整这些样式。

内容的提问来源于stack exchange，提问作者Double Bang