导航标签横向滚动首尾文本溢出显示省略号实现方案问询

问题本质 #

原生CSS的text-overflow: ellipsis只能处理容器末尾的溢出省略，而且仅在overflow: hidden（不可滚动）的场景下生效。对于可横向滚动的导航栏，要实现滚动时首尾同时显示省略号，原生CSS做不到，得靠伪元素模拟或者JavaScript监听滚动状态来实现。

方案一：CSS伪元素模拟（简单场景适用） #

利用容器的::before和::after伪元素分别做左右省略号，通过CSS滚动状态选择器控制显示/隐藏。

代码实现 #

<div class="scroll-tabs">
  <div class="tabs-container">
    <span class="tab">首页</span>
    <span class="tab">产品中心</span>
    <span class="tab">解决方案</span>
    <span class="tab">关于我们</span>
    <span class="tab">联系客服</span>
    <span class="tab">帮助中心</span>
    <span class="tab">企业合作</span>
  </div>
</div>

.scroll-tabs {
  width: 300px;
  border: 1px solid #ccc;
  overflow-x: scroll;
  position: relative;
  /* 隐藏默认滚动条（可选） */
  scrollbar-width: none;
}
.scroll-tabs::-webkit-scrollbar {
  display: none;
}

.tabs-container {
  display: flex;
  gap: 16px;
  padding: 8px 24px; /* 给伪元素留空间 */
  white-space: nowrap;
}

.tab {
  padding: 4px 8px;
  cursor: pointer;
}

/* 左侧省略号 */
.scroll-tabs::before {
  content: "...";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  padding-right: 4px;
  display: none;
}

/* 右侧省略号 */
.scroll-tabs::after {
  content: "...";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  padding-left: 4px;
}

/* 滚动到左侧有内容溢出时显示左侧省略号 */
.scroll-tabs:not(:has(.tabs-container:scroll-left(0)))::before {
  display: block;
}

/* 滚动到最右侧时隐藏右侧省略号 */
.scroll-tabs:has(.tabs-container:scroll-right(0))::after {
  display: none;
}

注意点 #

• 依赖:scroll-left()/:scroll-right()选择器，Chrome 105以上版本支持，低版本浏览器不兼容。
• 伪元素靠背景色覆盖截断内容，模拟省略号效果，需要确保背景色和容器一致。

方案二：JavaScript监听滚动（兼容性更好） #

通过监听滚动事件，判断容器滚动位置，动态控制首尾省略号的显示状态，适合生产环境。

代码实现 #

<div class="scroll-tabs js-scroll-tabs">
  <div class="ellipsis ellipsis-left">...</div>
  <div class="tabs-container js-tabs-container">
    <span class="tab">首页</span>
    <span class="tab">产品中心</span>
    <span class="tab">解决方案</span>
    <span class="tab">关于我们</span>
    <span class="tab">联系客服</span>
    <span class="tab">帮助中心</span>
    <span class="tab">企业合作</span>
  </div>
  <div class="ellipsis ellipsis-right">...</div>
</div>

.scroll-tabs {
  width: 300px;
  border: 1px solid #ccc;
  overflow-x: hidden; /* 隐藏外层滚动，用内部容器滚动 */
  position: relative;
  display: flex;
  align-items: center;
}

.tabs-container {
  display: flex;
  gap: 16px;
  padding: 8px;
  white-space: nowrap;
  overflow-x: scroll;
  scrollbar-width: none;
  flex: 1;
}
.tabs-container::-webkit-scrollbar {
  display: none;
}

.tab {
  padding: 4px 8px;
  cursor: pointer;
}

.ellipsis {
  position: absolute;
  background: #fff;
  padding: 0 4px;
  display: none;
}

.ellipsis-left {
  left: 0;
}

.ellipsis-right {
  right: 0;
}

const scrollTabs = document.querySelector('.js-scroll-tabs');
const tabsContainer = scrollTabs.querySelector('.js-tabs-container');
const leftEllipsis = scrollTabs.querySelector('.ellipsis-left');
const rightEllipsis = scrollTabs.querySelector('.ellipsis-right');

function updateEllipsis() {
  // 判断左侧是否有未显示内容
  const hasLeftOverflow = tabsContainer.scrollLeft > 0;
  // 判断右侧是否有未显示内容
  const hasRightOverflow = tabsContainer.scrollLeft < (tabsContainer.scrollWidth - tabsContainer.clientWidth);
  
  leftEllipsis.style.display = hasLeftOverflow ? 'block' : 'none';
  rightEllipsis.style.display = hasRightOverflow ? 'block' : 'none';
}

// 初始化执行一次
updateEllipsis();

// 监听滚动事件
tabsContainer.addEventListener('scroll', updateEllipsis);

// 监听窗口大小变化，避免容器宽度改变后状态错误
window.addEventListener('resize', updateEllipsis);

优势 #

• 兼容所有现代浏览器，无版本限制。
• 逻辑精准，能实时根据滚动位置更新省略号状态。

你的测试代码问题解析 #

1. 第一个示例：overflow: auto让内容可滚动，text-overflow: ellipsis属于内容的一部分，自然会跟着滚动，不符合需求。
2. 第二个示例：display: flex下text-overflow不生效，且原生CSS不支持滚动场景下的首尾省略，所以完全达不到效果。

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