Question

我有一个从数据库中获取的选项下拉列表。返回的选项数据是非常长的数据串。我想最大化选项的宽度。

<span class="col-sm-4"><label>Lists:</label></span>
<span class="col-sm-4">
        <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue">
            <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option>
        </select>
</span>

我使用了另一个问题的CSS代码段：Change width of select tag in Twitter Bootstrap

我在哪里更改选择框的宽度：

.selectwidthauto {
    width:50% !important;
        text-overflow:ellipsis;
        display: inline-block;
}

但是，似乎只控制了选择容器（宽度）。当选项加载时，我仍然得到选项中的文本的整个宽度（包含非常长的字符串）。

如何让我的选项与选择的宽度（在这种情况下为50％）或除全宽（自动）以外的任何尺寸相匹配？

只是因为我所写的内容并没有得到足够的解释。我创造了一个小提琴虽然不在Angular中，但它描述了正在发生的事情：

https://jsfiddle.net/tm1qasjg/3/

我需要选项值来切断特定大小的文本。我不希望它显示整个文本值。

Answer 1

你的代码改变了宽度，但是改变了！如果您要使用全宽度，可以使用width: 100%，请使用：

.selectwidthauto {
    text-overflow:ellipsis;
    display: inline;
    width: 100%;
}

<span class="col-sm-4"><label>Lists:</label></span>
<span class="col-sm-4">
        <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue">
            <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option>
        </select>
</span>

属性width: auto不等于width: 100%，width: auto是默认值。

Answer 2

老问题，但我最终还是这样： {{sValue.Name.substring（0,200）}} 数据越短，选择就越短

可以添加标签以显示全部选择

bootstrap选项宽度太长

2 个答案: