未知宽度展开div中的文本截断实现方案

问题 #

我使用了一张宽度未知的Unsplash图片，对应的容器div会随图片宽度自动展开。由于图片宽度不确定，目前只能通过添加width:100px样式来实现文本截断，但我希望移除该样式后仍能完成文本截断效果，请问该如何实现？

解决方案 #

核心思路是让文本容器继承图片所在容器的宽度，这样文本截断的宽度就和图片宽度自动对齐，不需要固定宽度值。具体调整如下：

• 移除文本容器上的width:100px行内样式
• 给文本容器添加w-full类，让它填满外层图片容器的宽度（外层容器宽度由图片实际宽度决定）
• 保留truncate类在文本元素上，此时它会基于父容器的宽度自动截断过长文本

修改后的代码示例 #

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

<div class="flex gap-2 overflow-x-scroll flex-shrink-0 px-6 md:px-8">
  <!-- 后续会遍历数组生成多个这样的项，图片尺寸未知 -->
  <div class="flex-shrink-0 overflow-hidden">
    <img class="h-24 object-fit rounded-lg" src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
    <div
      style="font-size:10px;"
      class="flex items-center gap-1 mt-1 text-neutral-900 border overflow-hidden w-full"
    >
      <img
        class="w-2.5 h-2.5 rounded-full"
        alt=""
        src="https://static-00.iconduck.com/assets.00/profile-circle-icon-2048x2048-cqe5466q.png"
      />
      <div class="truncate">Long examples name that should ellipsis</div>
    </div>
  </div>
  <!-- 循环结束 -->
</div>

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