如何实现Flex子元素横屏截断、竖屏独占一行？

问题场景与现有代码 #

我使用Tailwind实现布局需求：竖屏时目标子元素独占一行，横屏时所有元素保持同行。现有实现方式为：给Flex容器设置flex-wrap，目标子元素通过order-last+w-full实现竖屏独占，横屏时重置order和宽度。代码如下：

<div class="flex gap-2 flex-wrap [&_*]:border-b [&_*]:px-2">
  <div>fixed</div>
  <div class="truncate order-last w-full landscape:order-[unset] landscape:w-[unset]">variable</div>
  <div class="flex-1 text-center">stretch</div>
  <div>fixed</div>
</div>

现有问题 #

内容较短时布局正常，但当目标子元素内容过长时，横屏模式下会触发flex-wrap将其他元素挤到新行，而非优先截断文本。

期望效果 #

• 竖屏：目标子元素独占一行
• 横屏：目标子元素文本优先截断，所有同级元素保持在同一行

可行解决方案 #

方案1：给目标元素添加最小宽度约束与flex比例控制 #

Flex子元素默认会基于内容计算最小宽度，导致text-overflow: ellipsis无法触发。给横屏状态下的目标元素设置min-w-0打破最小宽度限制，同时通过flex-[1_0_xx%]设置基础宽度比例，保证空间不足时优先截断：

<div class="flex gap-2 flex-wrap [&_*]:border-b [&_*]:px-2">
  <div>fixed</div>
  <div class="truncate order-last w-full landscape:order-[unset] landscape:min-w-0 landscape:flex-[1_0_20%]">这是一段超长的测试文本用于验证截断效果</div>
  <div class="flex-1 text-center">stretch</div>
  <div>fixed</div>
</div>

• flex-[1_0_20%]：设置flex增长因子为1、收缩因子为0，基础宽度占容器20%，确保元素有初始空间，同时允许空间充足时扩展，不足时保持基础宽度并触发截断
• min-w-0：打破flex子元素的最小内容宽度限制，让文本截断规则生效

方案2：容器加溢出控制，目标元素用flex-1分配空间 #

若不想固定比例宽度，可给容器添加overflow-hidden避免溢出混乱，同时给横屏状态下的目标元素设置flex-1 min-w-0，让它与其他flex-1元素平分剩余空间并触发截断：

<div class="flex gap-2 flex-wrap [&_*]:border-b [&_*]:px-2 overflow-hidden">
  <div>fixed</div>
  <div class="truncate order-last w-full landscape:order-[unset] landscape:flex-1 landscape:min-w-0">这是一段超长的测试文本用于验证截断效果</div>
  <div class="flex-1 text-center">stretch</div>
  <div>fixed</div>
</div>

方案3：横屏时强制容器不换行 #

既然横屏需要所有元素同行，直接给容器在横屏模式下设置flex-nowrap，配合目标元素的min-w-0 truncate，强制文本优先截断而非换行：

<div class="flex gap-2 flex-wrap [&_*]:border-b [&_*]:px-2 landscape:flex-nowrap">
  <div>fixed</div>
  <div class="truncate order-last w-full landscape:order-[unset] landscape:min-w-0 landscape:flex-1">这是一段超长的测试文本用于验证截断效果</div>
  <div class="flex-1 text-center">stretch</div>
  <div>fixed</div>
</div>

• landscape:flex-nowrap：横屏时禁用容器换行，所有元素必须在一行内排列，此时文本截断会优先于换行触发

内容的提问来源于stack exchange，提问作者Tomáš Hübelbauer