如何让Bootstrap溢出容器的下拉列表项单行完整显示？

当前你的下拉列表项因内容过长自动换行，要实现单行完整显示，只需调整CSS中的几个关键属性：

修改方案 #

1. 给列表项（.item）添加white-space: nowrap，强制文本保持单行
2. 将.item的overflow: auto替换为overflow-x: auto，让超出容器宽度的内容通过横向滚动条展示
3. 确保下拉容器（.autocomplete-items）宽度匹配父元素，添加width: 100%避免容器过窄

修改后的完整CSS代码 #

.autocomplete-items {
    z-index: 100;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background-color: white;
    color: black;
    width: 100%; /* 匹配父容器宽度 */
}

.autocomplete-items .item {
    padding: 10px;
    cursor: pointer;
    background-color: white;
    width: auto;
    white-space: nowrap; /* 禁止文本换行 */
    overflow-x: auto; /* 横向滚动显示超长内容 */
}

.autocomplete-items .item:hover {
    background-color: #eee;
}

.autocomplete-items .item.active {
    background-color: #e9e9e9;
}

效果说明 #

• white-space: nowrap会阻止文本自动换行，确保所有内容在一行内
• overflow-x: auto会在内容超出容器宽度时自动显示横向滚动条，用户可滚动查看完整内容
• width: 100%让下拉容器和上方输入框宽度保持一致，视觉上更协调

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