使用Tailwind CSS实现面包屑长文本自动省略功能

问题场景 #

需要在小屏幕上自动截断面包屑中的长条目并显示省略号，但使用truncate类时效果未生效，同时不希望ul元素溢出其父div容器。原始代码如下：

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

<div class="max-w-md">
  <ul class="flex items-center">
    <li class="flex items-center">
      <a href="">
        <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path></svg>
      </a>
    </li>
    <li class="flex items-center">
      <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"></path></svg>
      <a href="" class="truncate">First item with a long name</a>
    </li>
    <li class="flex items-center">
      <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"></path></svg>
      <a href="" class="truncate">Second item with a long name</a>
    </li>
    <li class="flex items-center">
      <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"></path></svg>
      <a href="" class="truncate">Current page with a long name</a>
    </li>
  </ul>
</div>

问题原因 #

1. truncate类需要元素处于有明确宽度限制的容器中，但flex布局下的li默认min-width:auto，会优先保证内容完整，导致截断失效
2. ul未设置溢出控制，超出父容器时会直接横向溢出

解决方案 #

修改代码如下，关键调整已标注：

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

<div class="max-w-md">
  <!-- 添加overflow-hidden限制ul溢出 -->
  <ul class="flex items-center overflow-hidden">
    <li class="flex items-center">
      <a href="">
        <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path></svg>
      </a>
    </li>
    <!-- 添加min-w-0允许li收缩，ml-2调整文本与图标间距 -->
    <li class="flex items-center min-w-0">
      <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"></path></svg>
      <a href="" class="ml-2 truncate">First item with a long name</a>
    </li>
    <li class="flex items-center min-w-0">
      <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"></path></svg>
      <a href="" class="ml-2 truncate">Second item with a long name</a>
    </li>
    <li class="flex items-center min-w-0">
      <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"></path></svg>
      <a href="" class="ml-2 truncate">Current page with a long name</a>
    </li>
  </ul>
</div>

关键修改说明 #

• ul添加overflow-hidden：直接限制面包屑容器的溢出范围，避免超出父容器
• 文本项li添加min-w-0：覆盖flex子元素默认的最小宽度规则，允许容器收缩到内容宽度以下，让truncate类能够生效
• a标签添加ml-2：修复图标与文本之间的间距，优化视觉效果

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