Question

我有一个菜单我希望样式看起来“更好”。

这是目前的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/

限制多选菜单中显示的字符

1 个答案: