为何daisyUI单选标签页对应面板超32字符时标签宽度被挤压？

我正在使用daisyUI的radio tab lifted + tab content组件，代码与官方示例一致，仅保留2个标签页并填充内容：

<div role="tablist" class="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"></div>

  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2 is very very long" checked />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    1111 2222 3333 4444 5555 6666 77
  </div>
</div>

现象描述 #

• 标签页内容为32字符时，标签宽度正常，填满全部水平空间：
  
• 内容超过32字符后，对应标签宽度开始轻微挤压：
  
• 字符数增加，挤压程度加剧，到53字符时达到最小宽度：
  
• 若内容无空格，字符数超过7时就会开始挤压：
  
• 无空格内容占满可用水平空间时，宽度达到最小值：
  
• 挤压仅影响对应标签页，另一标签页不受影响

问题原因 #

daisyUI的tabs组件默认采用flex布局，标签（.tab元素）未设置强制均分或最小宽度规则。当标签页内容长度超过容器可分配的空间阈值时，flex布局会根据内容自动收缩标签宽度，导致挤压。对于无空格的长文本，因无法自动换行，会更早触发宽度收缩逻辑。

解决方法 #

1. 强制标签均分宽度 #

给所有.tab元素添加flex-1类，让标签平分容器可用空间，完全不受内容长度影响：

<input type="radio" name="my_tabs_2" role="tab" class="tab flex-1" aria-label="Tab 1 is very long" />
<input type="radio" name="my_tabs_2" role="tab" class="tab flex-1" aria-label="Tab 2 is very very long" checked />

2. 设置标签最小宽度 #

如果不需要均分宽度，可给.tab添加min-w-[XXpx]类（例如min-w-[150px]），限制标签的最小宽度，避免过度挤压：

<input type="radio" name="my_tabs_2" role="tab" class="tab min-w-[150px]" aria-label="Tab 1 is very long" />

3. 允许长文本换行 #

对于无空格的长文本，给.tab添加whitespace-normal类，允许文本换行，避免因无法换行导致的宽度挤压：

<input type="radio" name="my_tabs_2" role="tab" class="tab whitespace-normal" aria-label="Tab 1 is very long" />

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