Angular Tab换行实现：单tabset下将4个标签分为两行显示

需求说明 #

现有4个Angular标签（Tab1-Tab4），通过单个tabset组件实现，默认横向排列在同一行。需要调整为两行显示：Tab1、Tab2在第一行，Tab3、Tab4在第二行，且不想拆分使用两个tabset组件。

现有HTML代码 #

<tabset>
  <tab heading="Tab1" [active]="defaultTab==16 ? true : false" >
    <ng-template #tab1Comp></ng-template>
  </tab>

  <tab heading="Tab2" [active]="defaultTab==18 ? true : false" >
    <ng-template #tab2Comp></ng-template>
  </tab>

  <tab heading="Tab3" [active]="defaultTab==19 ? true : false" id="restart">
    <ng-template #tab3Comp></ng-template>
  </tab>

  <tab heading="Tab4" [active]="defaultTab==17 ? true : false" >
    <ng-template #tab4Comp></ng-template>
  </tab>
</tabset>

之前无效的尝试 #

曾给Tab3添加id="restart"并设置:before伪元素，但未生效：

#restart:before {
  content: ' ';
  clear: right;
  display: block;
}

可行CSS解决方案 #

方案原理 #

默认tabset的标签容器（通常是.nav-tabs）使用弹性布局，首先开启换行允许，然后给第三个标签项设置强制换行规则，使其另起一行。

代码实现 #

/* 允许标签容器内的元素换行 */
.tabset .nav-tabs {
  flex-wrap: wrap;
}

/* 给Tab3对应的标签项设置强制换行（利用已添加的id） */
#restart {
  break-before: always;
}

备选方案（无需id） #

如果不想依赖id，可通过子元素索引选择第三个标签项：

.tabset .nav-tabs {
  flex-wrap: wrap;
}

.tabset .nav-tabs .nav-item:nth-child(3) {
  break-before: always;
}

为什么之前的方案无效 #

:before伪元素是插入到目标元素内部的前置内容，无法影响外部布局的换行逻辑。必须直接作用于标签项本身，通过break-before强制其在新行开始。

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