如何让flex-direction: row布局的标签与子标签文本如单句般换行？

问题场景 #

我使用Tailwind UI开发带主标签（label）和子标签（sub-label）的组件，初始HTML结构如下：

<label>
  <p>Label</p>
  <p>Sublabel</p>
</label>

默认显示为垂直堆叠效果：

Label
Sublabel

通过以下CSS实现了稳定的垂直布局：

.label {
  display: flex;
  flex-direction: column;
}

现在需要让主、子标签同行显示，但设置flex-direction: row后，长文本会出现分列换行的异常：

this is the    this is the 
 main label     sublabel    

希望实现类似连续文本的自然换行效果：

This is the main label this is 
the sublabel

纯CSS实现方案（无需修改HTML结构） #

不需要调整HTML层级，通过修改Flex容器和子元素的样式即可实现：

1. 行内元素转换法
   将容器设为可换行的Flex布局，同时把两个p标签改为行内元素，消除块级元素的独占特性：

.label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem; /* 可选：控制主、子标签间的间距 */
}

.label p {
  display: inline;
  margin: 0; /* 移除p标签默认上下外边距 */
}

对应Tailwind类写法：

<label class="flex flex-wrap gap-1">
  <p class="inline m-0">This is the main label</p>
  <p class="inline m-0">this is the sublabel</p>
</label>

此时两个p标签的文本会像普通行内文本一样，在容器宽度不足时自动换行，不会强制分列。

2. contents穿透法
   利用display: contents让Flex容器直接识别p标签内部的文本节点（需注意：该属性在IE及部分旧版浏览器不支持）：

.label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.label p {
  display: contents;
}

结构调整方案（兼容性更优） #

如果需要兼容低版本浏览器，推荐将主、子标签文本放入同一个p标签内，用<span>区分以便单独控制样式：

<label>
  <p>
    <span class="font-semibold">This is the main label</span>
    <span class="text-gray-500">this is the sublabel</span>
  </p>
</label>

这种方式天然支持文本的自然换行，同时能灵活给主、子标签设置差异化样式（如字体权重、颜色）。

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