Question

我正在尝试创建一个将固定在页面顶部的菜单。其中一个菜单选项是＆＃34; TEAM＆＃34;，当与团队中的所有人一起徘徊时，它将会下降。名称列表将动态生成。

我遇到的问题是，如果这个人的名字很长，那个人的下拉菜单项就不会以他/她的名字扩展。相反，它会在2行或更多行上显示他们的名字。

我尝试在dropdown-content div上使用min-width，width：100％，这是包含所有下拉按钮的div。

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

似乎没什么用。我也尝试过提供“下拉内容”。宽度和/或最小宽度，但我仍然无法使用名称扩展按钮。

这是我创建的JSFiddle示例：https://jsfiddle.net/ebz24jc2/2/

Answer 1

添加white-space: nowrap;

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    white-space: nowrap;
}

Answer 2

请尝试将white-space: nowrap;添加到您不想包装的文本的父级。

如何使CSS悬停下拉菜单项扩展为文本

2 个答案: