如何用CSS或少量JS实现超出父元素宽度的子元素自动隐藏效果

纯CSS实现（无JS开销，推荐） #

核心利用Flex布局的不换行特性配合溢出隐藏，自动裁剪超出父容器宽度的子元素：

<!-- 结构示例 -->
<div class="parent">
  <div class="child">元素1</div>
  <div class="child">元素2</div>
  <div class="child">元素3</div>
  <div class="child">元素4</div>
</div>

.parent {
  /* 父元素红色虚线边框 */
  border: 2px dashed red;
  display: flex;
  flex-wrap: nowrap; /* 强制所有子元素在一行排列，不换行 */
  overflow: hidden; /* 超出父容器宽度的内容直接隐藏 */
  gap: 10px; /* 子元素之间的间距，可自定义 */
  padding: 10px;
}
.child {
  flex-shrink: 0; /* 禁止子元素被压缩宽度，保证每个子元素尺寸固定 */
  width: 100px; /* 子元素宽度可自定义 */
  height: 50px;
  /* 子元素蓝色填充 */
  background: blue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

如果接受最后一个放不下的元素被裁剪显示一部分，以上方案即可满足需求。如果要求最后一个元素必须完全可见才展示、否则整体隐藏，可使用下面的极简JS方案。

极简JS实现（精确控制显示逻辑） #

仅需少量JS监听尺寸变化，判断是否需要隐藏最后一个子元素：

const parent = document.querySelector('.parent')
const children = document.querySelectorAll('.child')
// 对应CSS中设置的子元素间距gap，如有修改此处同步调整
const GAP = 10

function adjustVisibleChild() {
  // 先重置所有子元素为显示状态
  children.forEach(el => el.style.display = 'block')
  const parentAvailableWidth = parent.clientWidth
  let totalWidth = 0
  // 计算所有子元素加间距的总宽度
  children.forEach(el => {
    totalWidth += el.offsetWidth + GAP
  })
  // 总宽度超出父容器可用宽度时，隐藏最后一个子元素
  // 减GAP是移除最后一个元素末尾多计算的间距
  if (totalWidth - GAP > parentAvailableWidth) {
    children[children.length - 1].style.display = 'none'
  }
  // 如果需要支持隐藏多个放不下的元素，可将上面的判断改为循环判断即可
}

// 监听窗口尺寸变化触发调整，页面初始化也执行一次
window.addEventListener('resize', adjustVisibleChild)
adjustVisibleChild()

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