如何仅通过CSS实现窗口缩放换行后隐藏完整导航元素（仿亚马逊导航栏效果）

核心逻辑 #

放弃强制导航项在一行的white-space:nowrap，转而给导航容器固定一个单行导航项的高度，再设置overflow:hidden。当窗口宽度不够时，导航项会自动换行，但换行后的整行会因为容器高度被限制，直接被隐藏掉，这样就实现了「整项消失」的效果，而不是逐个截断字符。

修改后的完整CSS代码 #

.site-nav { 
  position: relative; 
  padding: 0; 
  text-align: left; 
  margin: 0 0 25px 0;
  /* 关键新增/调整的样式 */
  box-sizing: border-box; /* 防止内边距影响高度计算 */
  height: 28px; /* 这个值要和你的单行导航项高度匹配：字体大小 + a标签上下padding，你可以根据实际情况调整 */
  overflow: hidden; /* 藏起超出容器高度的内容 */
  line-height: 28px; /* 和height保持一致，让单行导航项垂直居中 */
  
  a { 
    padding: 3px 10px;
    display: inline-block; /* 确保a标签的高度被正确计算 */
    line-height: 22px; /* 单独给a设行高，避免继承容器的大line-height导致文字错位 */
  } 
  a:hover { 
    padding: 3px 10px; 
    background-color: #e6f2ff; 
    color: #000000; 
  } 
  li { 
    display: inline-block;
    vertical-align: top; /* 让所有li顶对齐，避免换行后第一行导航被挤偏移 */
  }
}

一些需要注意的细节 #

1. 高度要精准：height的数值一定要和你单行导航项的实际总高度匹配（比如你的a标签上下padding是3px，字体大小16px，可根据视觉效果微调数值），确保容器高度刚好能放下一行导航，多出来的内容直接隐藏。
2. 垂直对齐别忘加：给
3. 加vertical-align:top很重要，不然有些导航项可能因为默认的基线对齐，导致第一行被挤到容器外面，反而隐藏了不该隐藏的内容。
4. 行高分离设置：给单独设line-height是为了避免文字在点击区域里垂直位置不对，保证视觉上的居中效果。

效果测试 #

你可以试试调整窗口宽度：当空间足够时，所有导航项正常在一行显示；当窗口缩小到某一程度，第一个放不下的

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