多重選擇菜單中顯示的限制字符

Question

我有一個菜單，希望將其樣式設置為“更好”。

這是菜單的圖像： http : //imgur.com/0AObXnm

這是當前的html：

<button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all customClass customClassTwo" aria-haspopup="true" tabindex="0" style="width: 120px;">
<span>
    <span class="ellipsis_text" style="90px">Text to limit goes here</span>
</span>
</button>

以下是與元素關聯的樣式：

border-collapse: collapse;
color: rgb(103,103,103);
cursor: default;
display: inline;
font-family: Arial, 'Helvetica Neue', 'Helvetica sans-serif';
font-size: 12px;
font-weight: normal;
height: auto
letter-spacing: normal;
line-height: normal;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre;
width: auto
word-break: break-all;
word-spacing: 0px;
word-wrap: break-word;

這是一個帶有過濾器的多選菜單，它的初始化方式如下：

$(function() {

    $("#Id").multiselect({
        height: 500,
        minWidth: 280,
        multiple: false,
        selectedList: 1
    }).multiselectfilter({
        width: 300
    });

    $( "#Id" ).attr("name", "Id");
});

優選地，我希望菜單在菜單中的箭頭之前將文本剪掉一點，而不要像在圖片中看到的那樣顯示在新行上的文本頂部。

如果有人有什么好主意。 疊前流搜索包括在樣式菜單上進行搜索，並使用javascript來限制所顯示字符的數量，但這些字符均未提供任何適用的結果。

干杯

Answer 1

給按鈕一個高度和一個寬度，並將過流設置為none，就可以做到

button { 
    overflow: none;
    height: 50px;
    width: 10px;
}

http://jsfiddle.net/jH5b6/