如何设置TabIndicator宽度与标签文本宽度一致而非匹配容器宽度

方案1：纯CSS实现（优先推荐） #

无需计算宽度，适配所有文本长度场景，实现逻辑如下：

• 每个Tab的文本内容单独包裹无宽行内元素，如<span class="tab-text">，禁止给该元素设置flex:1、固定宽度等会撑满容器的属性
• 下划线通过激活态文本元素的伪元素实现，直接继承文本的宽度
• 参考代码：

/* Tab容器原有样式保留 */
.tab-item {
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 文本包裹元素样式 */
.tab-text {
  position: relative;
}
/* 激活态下划线 */
.tab-text.active::after {
  content: "";
  position: absolute;
  left: 0;
  /* 调整bottom值匹配下划线在Tab容器中的位置 */
  bottom: -10px;
  width: 100%;
  height: 2px;
  background: #1890ff;
}

方案2：JS精准计算实现（适配需要Indicator滑动动画的场景） #

如果需要独立的Indicator元素做跨Tab的滑动过渡效果，可通过以下方法获取准确文本宽度：

• 同样给每个Tab的文本单独包裹<span class="tab-text">行内元素
• 激活Tab时，直接获取对应文本元素的offsetWidth属性得到文本准确宽度，同时取offsetLeft属性得到文本相对Tab容器的左偏移量，用于定位Indicator
• 参考代码：

const updateIndicator = (activeIndex) => {
  const textList = document.querySelectorAll('.tab-text');
  const activeText = textList[activeIndex];
  const indicator = document.querySelector('.tab-indicator');

  const textWidth = activeText.offsetWidth;
  const textLeft = activeText.offsetLeft;

  // 设置Indicator样式
  indicator.style.width = `${textWidth}px`;
  indicator.style.transform = `translateX(${textLeft}px)`;
  // 可加transition属性实现滑动动画
}

之前无法拿到准确文本宽度的核心原因是直接获取了Tab父容器的宽度，只要单独选中包裹文本的行内元素，即可拿到精确的文本尺寸。

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