Question

问题：正如您在图片中看到的那样，所选选项的背景不会扩展为选项文本的宽度，并且具有白色背景..它将不会显示剩下的文字，我该如何解决这个问题？我正在使用Chrome，但我想在Firefox和IE中使用它。

enter image description here

HTML：

<select multiple="" class="h-scrollable form-control">
                <option ng-repeat="elem in list">
                    {{elem}}</option>
            </select>

CSS：

.h-scrollable
{
    width: 350px; 
    height: 150px !important;
    overflow: auto;
    margin-right:20px;
    font-size: medium;
}
.h-scrollable:focus
{
    height: 150px !important;
    overflow: auto;
    margin-right:20px;
    font-size: medium;
    background-size: 100%;
    background: pink;
}
.h-scrollable option
{
    /*width: 350px; */
}
.h-scrollable option:checked
{
    /*width: 400px; THIS FIXES THE PROBLEM FOR A TEXT OF WIDTH = 350px; I want a general solution  that will work for any length of  text*/
}

Answer 1

将选择放在div中，删除select /选项上的宽度并添加宽度和overflow：auto到div。 http://jsfiddle.net/g52qmz32/

<div style="width: 240px; overflow: auto;">
    <select multiple="" class="h-scrollable form-control">
    <option>one option</option>
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
    <option>another option</option>
    <option>last option is really very long one</option>
    </select>
</div>

可能需要对您的喜好进行一些修改，但我相信这就是您所追求的目标。

**编辑：如果内容不超过240像素，我删除了右边距以消除滚动条。还为.h-scrollable类添加了最小宽度。这是你正在寻找的吗？

Answer 2

使用CSS执行text-overflow并允许文本自动截断，而不需要滚动条。

这取决于设计师的自由裁量权，但我个人会考虑三次，然后第三次要求用户在select字段内滚动。

有关示例，请参阅此小提琴的更新：http://jsfiddle.net/7dkhgLrv/6/

更新：另外，在overflow: auto;课程中添加.h-scrollable以获得最佳效果。

动态扩展选定的选项背景

2 个答案: