组合框angularjs中的自动换行

Question

在我的Angularjs应用程序中，我有一个组合框来获取客户的信息，但是一些客户的名字太长而不会像这样影响整个设计;

  

它甚至没有添加任何水平滚动条，因此可以阅读   全名。

我做了RnD，但没有发现任何与之相关的内容。所以我们不能以任何方式处理这个问题？或者我在这里遗漏了什么？

已更新：代码

这是我的html显示客户端下拉列表

<select class="form-control" id="cmbClients" name="cmbClients" ng-model="cmbClientsSelected" ng-options="client.clientName for client in lstAllClients | orderBy : 'clientName'" ng-keydown="cmbClients_KeyDown($event)" > 
    <option value=""> -- Select --</option>
</select>

Answer 1

使用默认的select HTML元素无法实现此目的。您可以使用自定义选择ui-select来实现此目的。那些允许选项内的单词分解。

视图

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.0/select2.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-select2/master/src/select2.js"></script>

<div ng-controller="MyCtrl">
    No Results Tag: {{ noResultsTag }}
    <select style="width: 400px;" ui-select2="select2Options" ng-model="selectedTags">
        <option ng-repeat="tag in tags" value="{{tag.id}}">{{tag.name}}</option>
    </select>
</div>

AngularJS应用程序

var myApp = angular.module('myApp', ['ui.select2']);

function MyCtrl($scope, $compile, $timeout) {
    $scope.tags = [
        {id: 0, name: "Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero Zero"},
        {id: 1, name: "One"},
        {id: 2, name: "Two"}, 
        {id: 3, name: "Three"}, 
        {id: 4, name: "Four"}, 
    ];
    $scope.select2Options = {
        formatNoMatches: function(term) {
            var message = '<a ng-click="addTag()">Add tag:"' + term + '"</a>';
            if(!$scope.$$phase) {
                $scope.$apply(function() {
                    $scope.noResultsTag = term;
                });
            }
            return message;
        }
    };
}

<强>＆GT; demo fiddle