Css 角度ui选择中的多行（换行）选择选项

是否可以在多行中进行选择？我知道你不能在传统的选择输入中这样做，但在这里它必须是可能的。如果你是CSS大师，plunker就在这里：

{{$select.selected.formatted_address}

这是由于CSS属性空白，在默认ui选择样式表中设置为nowrap

您可以通过将以下内容添加到自定义css来更改此行为：

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

这将改变页面上所有ui选择的行为。如果只想更改一个，可以将其包装在div中：

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

我用叉子叉了你的叉子以显示结果

---

从这个角度看，它似乎不适用于引导样式（这是最初的问题？），它似乎适用于引导下拉列表，但不适用于结果框（它会溢出）

这个分叉的plunkr演示了：

注意：我更改了这个：

<ui-select ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" style="width: 200px;">

---

对于较新版本的

ui，请选择
（我使用的是0.19.3），看起来
a
元素已替换为
span

另外，要使换行和边框正确围绕引导主题中的
ui选择match
，从
到表单控件的高度将阻止边框围绕新行，因此应制定第二条规则：

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

div.multiline-select .ui-select-bootstrap .ui-select-match > span.btn {
  white-space: normal;
  height: auto;
}

工作plunkr从Vincent的分叉并更新为0.19.3:
如果您已经预先格式化了多行文本，您可以使用{{text}}标记。plunker中的第二个示例是multilinedI，意思是“选择”中的换行
<ui-select ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" style="width: 200px;">

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

div.multiline-select .ui-select-bootstrap .ui-select-match > span.btn {
  white-space: normal;
  height: auto;
}