VideoJS章节菜单CSS：如何让菜单框适配文本长度？

问题描述 #

我正在尝试为VideoJS的ChapterButton菜单编写CSS样式，使其能够适配不同长度的文本（避免文本换行）。目前只能将菜单设置为固定宽度，但需要它能自适应不同的文本长度。请问是否有简便的实现方法？我找的CSS规则是否正确？

现有CSS #

.vjs-menu-button-popup .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0em;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

原效果 #

我的CSS覆盖代码 #

.vjs-menu-button-popup .vjs-menu {
      width: 20em;
      left: 1em;
 }

修改后效果 #

解决方案 #

1. 核心实现思路 #

要让菜单自适应文本长度，关键是取消固定宽度限制，让容器根据内部内容自动撑开，同时强制文本不换行。

2. 调整后的CSS代码 #

/* 重置菜单固定宽度，改为自适应 */
.vjs-menu-button-popup .vjs-menu {
  width: auto;
  left: auto;
  right: 0; /* 可根据布局需求调整，避免菜单超出视口 */
}

/* 让菜单内容容器自适应宽度，强制文本不换行 */
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  width: auto;
  min-width: 10em; /* 可选：设置最小宽度，优化短文本菜单视觉效果 */
  white-space: nowrap;
}

/* 确保菜单项文本一行显示 */
.vjs-menu-button-popup .vjs-menu .vjs-menu-item {
  white-space: nowrap;
  padding: 0.5em 1em; /* 调整内边距，提升文本可读性 */
}

3. 规则说明 #

• 将.vjs-menu的固定宽度改为width: auto，让容器跟随内容自动调整宽度；
• 添加white-space: nowrap到菜单内容和菜单项，强制文本不换行；
• 调整left/right定位属性，避免菜单弹出后超出视频容器或浏览器视口；
• 可选设置min-width，防止短文本菜单过窄，保证基础视觉体验。

对你现有CSS的评价 #

你之前的覆盖代码只是将固定宽度从10em改为20em，本质还是固定宽度逻辑，无法适配不同长度的文本，不能从根本上解决问题。正确的方向是取消固定宽度，结合自适应宽度与文本不换行规则实现需求。

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