根据页面宽度动态堆叠导航li项时li内文本不换行问题求助

你现有代码失效的核心原因是min-content会强制将a标签宽度收缩到内容最小可展示宽度，无法自适应li的可用宽度，同时导航容器默认的弹性规则会优先将放不下的整个li项移到下一行，不会触发内部文本折行。
按以下步骤调整CSS即可实现预期效果： #

• 导航外层容器配置 #

给导航父容器设置弹性基础规则，允许li项必要时才整体换行：

.sub-nav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 可根据设计需求调整li项间距，示例为水平12px 垂直0 */
  gap: 0 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

• li项弹性规则配置 #

设置li的收缩规则，允许宽度自适应压缩，同时可设置最小宽度避免文本折行过于碎片化：

.sub-nav li {
  /* 允许li项自由拉伸、收缩，基础宽度由内容决定 */
  flex: 1 1 auto;
  /* 最小宽度可自行调整，示例为最小80px，不小于内容最短可展示宽度 */
  min-width: max(80px, min-content);
}

• a标签折行规则配置 #

覆盖默认的文本不换行规则，支持内部文本自动折行：

.sub-nav li > a {
  display: block;
  width: 100%;
  line-height: 1.1em;
  /* 允许长文本/单词自动折行 */
  word-break: break-word;
  white-space: normal;
  /* 可保留原有其他a标签样式，比如padding、color等 */
}

最终实现的效果为：页面宽度充足时所有导航项在同一行展示，宽度缩小时首先压缩每个li的宽度，触发a标签内部文本向下折行，直到li收缩到设定的最小宽度阈值后，才会将后续li项整体移到下一行排布。

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