如何在Selectize.js下拉框中截断过长文本以固定下拉框高度？

我明白你的需求：下拉框里有长文本选项时，Selectize.js会自动换行并改变下拉框高度，你想让文本超出宽度时自动截断，保持下拉框高度固定对吧？

你已经设置了white-space: nowrap，但还缺几个关键CSS属性来实现截断效果并固定高度。直接看修改后的完整代码吧：

完整代码示例 #

HTML（和你原来的一致） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<select multiple class="form-control select-key" id="sel2" name="key-list[]">
<option>SBI Cap</option>
<option>PGIM MidCap</option>
<option>Axis SmallCap</option>
<option>Kotak Technology</option>
<option>SBI Technology Value Retirement Direct Fund</option>
</select>

JavaScript（逻辑不变，保留你原来的交互） #

$(function () {
$("#sel2").selectize({
    onDropdownOpen: function($dropdown) {
        if (!this.lastQuery.length) {
            this.close();
            this.settings.openOnFocus = false;
        }
    },
    onItemAdd: function() {
        this.close();
    },
    onType : function (str) {
        if (str === "") {
            this.close();
        }
    }
});
});

CSS（核心修改在这里） #

.form-control { width: 300px !important; }
.selectize-dropdown { width: auto !important; }

/* 重点：实现文本截断+固定选项高度 */
.selectize-dropdown [data-selectable], 
.selectize-dropdown .optgroup-header {
    white-space: nowrap; /* 强制文本不换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 用省略号代替截断的文本 */
    line-height: 2.2em; /* 固定行高 */
    height: 2.2em; /* 固定选项高度，确保所有选项高度一致 */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

为啥这样改？ #

• white-space: nowrap保证文本不会换行，这是截断的前提
• overflow: hidden和text-overflow: ellipsis配合，让超出宽度的文本自动变成省略号
• 固定line-height和height是为了让所有选项高度统一，不管文本长短，下拉框的高度都不会乱变

这样设置后，你的下拉框就能完美实现长文本截断、高度固定的效果啦！

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