如何在Tailwind中为两个div设置文本溢出截断属性？

问题核心原因 #

文本截断（truncate）依赖overflow: hidden、text-overflow: ellipsis、white-space: nowrap三个CSS属性生效，但在Flex布局下存在两个阻碍：

• Flex子元素默认min-width: auto，会阻止元素收缩到内容宽度以下，截断规则无法触发
• 父容器未设置合理宽度约束，子元素没有可触发截断的有限空间

修复方案 #

1. 给文本所在的Flex子元素添加min-w-0，解除最小宽度限制，允许元素收缩
2. 给父Flex容器添加flex-1，确保它在响应式场景下占用剩余可用宽度
3. 替换原float布局为纯Flex布局，避免浮动带来的宽度计算问题

修改后的完整代码 #

<div class="bg-black text-white">
  <div class="container mx-auto px-6 py-3">
    <div class="container mx-auto flex items-center justify-between">
      <div class="mb-1 flex flex-1 text-3xl min-w-0">
        <div class="truncate font-bold min-w-0">{EmployeeName},</div>
        <div class="truncate font-normal min-w-0 ml-2">{LocationName}</div>
      </div>
      <button class="mx-3 mt-1 min-w-[5rem] rounded-lg bg-green-400 px-1 py-1.5 text-center text-xs text-yellow-50">Details</button>
      <div class="py-2">
        <div class="flex flex-col items-end">
          <div class="flex flex-row">
            <button class="mx-2 h-6 w-6">Info</button>
            <select id="timerange" class="block w-full text-black">
              <option selected>Choose timerange</option>
              <option value="sixm">6 months</option>
              <option value="twelvem">12 months</option>
              <option value="twentyfourm">24 months</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• 将最外层容器改为flex items-center justify-between，用Flex布局替代浮动，更适配响应式场景
• 文本容器添加flex-1 min-w-0，确保它在剩余空间内收缩，为截断提供必要的有限宽度
• 两个文本子元素都添加min-w-0，解除Flex子元素的默认最小宽度限制，让truncate规则正常生效

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