通过设置 width: fit-content 配合合理的定位与继承策略，可使下拉菜单容器自动匹配最长选项文本宽度，确保所有文字不截断、不换行、完全可见。
通过设置 `width: fit-content` 配合合理的定位与继承策略，可使下拉菜单容器自动匹配最长选项文本宽度，确保所有文字不截断、不换行、完全可见。
要解决下拉菜单容器宽度无法自适应最长文本的问题，核心在于打破默认的 100% 宽度约束，并让容器根据子内容（尤其是最长 标签）自然撑开。原代码中 .dropdown 设置了 width: 100%，这会强制它继承父容器（.container）的宽度——而 .container 是 inline-block，其宽度由内部首个链接（如 "EN ▾"）决定，远小于 "German" 等较长文本，导致下拉项被压缩或溢出。
✅ 正确做法是：移除 ul.dropdown { width: 100% }，改用 width: fit-content，并添加 min-width: 100% 以保障不低于触发按钮宽度，同时设置 left: 0 确保对齐：
ul.dropdown {
/* 移除 width: 100% */
width: fit-content; /* 关键：宽度由内部最长子元素决定 */
min-width: 100%; /* 确保不下于 .language 按钮宽度 */
background: #22438C;
position: absolute;
z-index: 999;
display: none;
left: 0; /* 避免因 fit-content 导致水平偏移 */
top: 100%; /* 紧贴触发项下方 */
}
⚠️ 注意事项：
-
fit-content在现代浏览器中广泛支持（Chrome 69+、Firefox 63+、Safari 14.1+），若需兼容旧版 IE，可用display: table+table-layout: fixed替代，但推荐渐进增强； - 确保下拉项内链接不设固定宽度或
white-space: nowrap（当前已满足），否则可能影响fit-content计算； - 若语言名含空格或长单词（如
"Español"），建议补充white-space: nowrap到下拉链接中防止意外折行：
ul.dropdown a {
white-space: nowrap; /* 强制单行显示，确保 fit-content 准确测量 */
}
? 进阶提示：如需更健壮的响应式表现，可结合 max-width 限制极端长度（例如 max-width: 300px），并搭配 overflow-x: visible 防止隐藏。
最终效果：下拉菜单宽度将严格匹配 "German"（或更长语言名）的实际渲染宽度，且 "EN ▾" 按钮与下拉列表左右边缘自然对齐，所有文本清晰完整、无截断、无换行。
