固定300px宽度容器内溢出首行的子DIV如何隐藏并加CSS省略号

开发者阿泽

2026-9-28

实现方案

核心思路

用flex不换行布局配合溢出隐藏规则，通过伪元素实现子项分隔符和末尾省略号，适配主流现代浏览器，完全保留你原有的HTML结构。

完整实现代码

<!-- HTML结构和你提供的一致，仅添加class方便绑定样式 -->
<div class="outer-container">
    <div class="inner-item">First Div</div>
    <div class="inner-item">Second Div</div>
    <div class="inner-item">Third Div</div>
    <div class="inner-item">Fourth Div</div>
    <div class="inner-item">Fifth Div</div>
</div>

<style>
.outer-container {
  width: 300px;
  display: flex;
  flex-wrap: nowrap; /* 强制子元素不换行 */
  overflow: hidden; /* 直接隐藏超出容器的所有子元素 */
  align-items: center;
  position: relative;
  background: #ffffff; /* 和你实际使用的父容器背景色保持一致即可 */
  padding-right: 20px; /* 预留省略号的显示空间 */
}
.inner-item {
  flex-shrink: 0; /* 禁止子元素被自动压缩宽度 */
  white-space: nowrap; /* 子元素内部文本不换行 */
}
/* 给非第一个子元素前面添加分隔符 */
.inner-item + .inner-item::before {
  content: " | ";
  margin: 0 4px;
}
/* 末尾固定显示省略号 */
.outer-container::after {
  content: "...";
  position: absolute;
  right: 0;
  padding-left: 4px;
  background: inherit; /* 继承父元素背景，遮挡末尾溢出的内容 */
}
</style>