如何按指定规则实现多文本元素的CSS自定义换行断点？

我有三个变量StringA、StringB、StringC，其中StringA和StringB组合为一个外部链接。显示规则如下：

• 默认状态下三个元素在同一行显示：

  StringA StringB StringC
  

• 当空间不足时，优先将StringA留在第一行，其余换行：

  StringA
  StringB StringC
  

• 当空间仍不足时，再进一步换行：

  StringA
  StringB
  StringC
  

当前代码结构（外层已使用flex布局）：

<span class="container">
    <a class="link">
        <span class="string-a">{{stringA}} </span>
        <span class="string-b">{{stringB}}</span>
    </a>

    <span class="string-c">{{stringC}}</span>
</span>

对应的CSS：

.container {
    .string-b {
        white-space: nowrap;
    }

    .string-c {
        white-space: nowrap;
    }
}

当前代码能基本实现需求，但会自主选择在StringA和StringB之间或StringB和StringC之间换行，而我需要优先在StringA和StringB之间换行，仅当两者已换行时才在StringB和StringC之间换行。希望用flexbox解决，不想用JavaScript。

要实现指定的换行优先级，只需通过flex布局的flex-wrap、min-width属性配合元素分组来控制换行顺序，无需JS：

方法1：调整HTML结构（推荐，层级更清晰） #

把StringA单独作为一个flex项，StringB和StringC合并为一个子容器，明确换行优先级的层级：

<span class="container">
    <a class="link-part a">{{stringA}}</a>
    <span class="bc-container">
        <a class="link-part b">{{stringB}}</a>
        <span class="text-c">{{stringC}}</span>
    </span>
</span>

对应的CSS：

.container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em; // 替代手动空格，间距更可控
}

.link-part.a {
    min-width: min-content; // 确保StringA不会被压缩到比自身内容窄
}

.bc-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em;
    min-width: min-content; // 优先让整个bc容器换行，而非拆分内部元素
}

.link-part.b, .text-c {
    white-space: nowrap; // 单个元素内部不折行
}

方法2：不修改原HTML结构 #

如果不想改动DOM，直接调整原CSS即可：

.container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em;
}

.container .link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em;
    min-width: min-content;
}

.string-a {
    min-width: min-content; // 强制StringA优先单独占一行
}

.string-b, .string-c {
    white-space: nowrap;
}

核心逻辑 #

1. 外层flex容器开启flex-wrap: wrap，允许整体换行
2. 通过min-width: min-content让StringA和StringB+StringC的组合容器优先作为整体换行，而非拆分内部元素
3. 子容器内部同样开启flex换行，当空间不足以容纳StringB+StringC时，再分别折行

这样就能严格按照要求的顺序换行：先拆StringA和StringB+StringC，再拆StringB和StringC。

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