Multi-lined (word wrap) select choices in angular-ui-select

Question

Is it possible to make the select choice in angular-ui-select multilined? I know that you can't do that in conventional select input, but here it must be possible. If you're CSS guru, the plunker is here: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

<ui-select ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             style="width: 300px;">
 <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
 <ui-select-choices repeat="address in addresses track by $index"
             refresh="refreshAddresses($select.search)"
             refresh-delay="0">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
 </ui-select-choices>
</ui-select>

Answer 1

This is due to CSS property white-space, which is set to nowrap in default ui-select stylesheet.

You can change this behavior by adding this to your custom css :

.ui-select-bootstrap .ui-select-choices-row > a{
    white-space: normal;
}

This will alter the behavior of all ui-select on your page. If you want to alter just one, you can wrap it in a div :

  <div class="multiline-select">
    <ui-select (...)>
      (...)
    </ui-select>
  </div>

and change your css selector

div.multiline-select .ui-select-bootstrap .ui-select-choices-row > a{
    white-space: normal;
}

I have forked your plunkr to show the result http://plnkr.co/edit/IplCxLbnPoIW4TJx1HIx?p=preview