jquery - CSS 背景颜色不突出具有 "overflowed"的文本

Question

我正在动态填充 <select>那是可滚动的。我能够在 HTML 和 jQuery UI 中创建它。我遇到的问题是，当我有一个长条目并向右滚动时(使用 overflow: scroll )，突出显示的长度与开始滚动之前选择的宽度一样长。如何将突出显示扩展到最长条目的宽度？ (或者文字的长度)

JSFiddle

HTML

<div id="div1">
    <ol id="selectable">
        <li>this/is/a/really/really/really/long/path/name.....................................</li>
        <li>Enterprise Service Management/ALMD/alm-manifest-name</li>
        <li>joshtestrepo</li>
        <li>notatestrepo</li>
        <li>vanilla ice cream</li>
    </ol>
</div>
<div id="div2">
    <select id="selection" size="4">
    <option>this/is/a/really/really/really/long/path/name.....................................</option>
        <option>Enterprise Service Management/ALMD/alm-manifest-name</option>
        <option>joshtestrepo</option>
        <option>notatestrepo</option>
        <option>vanilla ice cream</option>
    </select>
</div>

CSS

#selectable .ui-selecting {
    background: #FECA40;
}
#selectable .ui-selected {
    background-color: #F39814;
    color: green;
}
#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    height: 100px;
    overflow: scroll;
    white-space: nowrap;
    resize:both;
}
#selection {
    width:250px;
    overflow:scroll;
    resize:both;
}

jQuery

$(function () {
    $("#selectable").selectable();
});

$("#selectable").selectable({
    selected: function (event, ui) { 
        $(ui.selected).siblings().removeClass("ui-selected"); //forces a single select
    }
});

---更新---

@TheUknown 的回答对 #selectable 非常有效.为了将来引用，修复常规 <select> , 尝试使用 display:table 的变体.

Updated fiddle

Answer 1

这是因为默认显示是列表类型，它不包含溢出的内容。

只需将其更改为inline-block

#selectable .ui-selected {
    background-color: #F39814;
    color: green;
    display: inline-block; 
}

这是 working fiddle