嘿，我明白你遇到的问题了——Bootstrap面包屑在移动端容易换行，用了white-space: nowrap又会导致文本溢出消失。别担心，我们可以结合几个CSS属性来实现文本自动缩小适配单行的效果，下面给你具体方案：

核心思路 #

利用CSS的动态字体大小（clamp()）配合Flex布局，让面包屑文本在屏幕宽度不足时自动缩小，同时保持单行显示，不会溢出或换行。

修改后的完整代码 #

HTML代码 #

<section>
  <div class="container">
    <div class="row mb-5">
      <!-- 使用d-flex让内部元素横向排列，align-items-center垂直居中 -->
      <div class="col-12 d-flex align-items-center breadcrumb-wrap">
        <a class="mr-1 noDecoration" href="tienda.php">Tienda</a>
        <span class="mx-1">></span>
        <a class="mx-1 noDecoration" href="tienda.php#sudaderaIcon">Sudaderas</a>
        <span class="mx-1">></span>
        <span class="ml-1">Sudadera Tape Verde</span>
      </div>
    </div>
  </div>
</section>

CSS代码 #

/* 面包屑容器样式 */
.breadcrumb-wrap {
  white-space: nowrap; /* 强制单行 */
  overflow: hidden; /* 极端情况防止溢出页面 */
}

/* 面包屑内的文本元素样式 */
.breadcrumb-wrap a,
.breadcrumb-wrap span {
  flex-shrink: 1; /* 允许元素在空间不足时收缩 */
  min-width: 0; /* 取消flex子项默认最小宽度限制，确保能收缩 */
  font-size: clamp(0.8rem, 2vw, 1rem); /* 动态字体大小：最小0.8rem，基于视宽2vw，最大1rem */
}

/* 保留你原有的链接样式 */
.noDecoration, .noDecoration:hover {
  text-decoration: none;
  color: #000000;
}

关键属性解释 #

1. clamp(0.8rem, 2vw, 1rem)：

   • 这是CSS的动态字体大小函数，会根据屏幕宽度自动调整字体尺寸：
     • 0.8rem：最小字体大小（移动端最小显示尺寸）
     • 2vw：首选字体大小，基于视窗宽度的2%（随屏幕宽度变化）
     • 1rem：最大字体大小（桌面端正常显示尺寸）
   • 你可以根据需求调整这些数值，比如把2vw改成1.5vw让字体变化更平缓，或者调整min/max值适配你的设计。

2. flex-shrink: 1 + min-width: 0：

   • 因为我们用了Bootstrap的d-flex类，容器变成Flex布局，这两个属性确保内部的文本元素在空间不足时可以正常收缩，不会因为默认的min-width: auto限制而无法缩小。

3. white-space: nowrap：

   • 强制所有内容保持在同一行，配合动态字体大小实现单行适配。

备选方案（如果需要省略号 fallback） #

如果极端小屏幕下你不想字体太小，也可以结合text-overflow: ellipsis作为备选：

.breadcrumb-wrap span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

这样最后一段文本在无法完全显示时会显示省略号，而不是继续缩小。

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