angular-ui-select 中的多行（自动换行）选择选项答案

【问题标题】：Multi-lined (word wrap) select choices in angular-ui-selectangular-ui-select 中的多行（自动换行）选择选项
【发布时间】：2014-12-03 13:09:32
【问题描述】：

是否可以在angular-ui-select multilined 中进行选择？我知道你不能在传统的选择输入中做到这一点，但在这里它必须是可能的。如果您是 CSS 大师，请点击此处：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>

【问题讨论】：

如果你有预格式化的多行文本，你可以使用
```
{{text}}
```
标签。
plunker 中的第二个例子是多行的
我的意思是“选择”内的单词换行

标签： css angularjs angular-ui

【解决方案1】：

对于ui-select 的更新版本（我使用的是0.19.3），a 元素似乎已被span 替换。

为了让自动换行和边框在引导主题中围绕ui-select-match 正常工作，.form-control 的高度防止边框绕过新行，因此应该制定第二条规则：

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's 分叉并更新到 0.19.3：http://plnkr.co/edit/XKAJ1gVj4uAukk7IaBd2?p=preview

【讨论】：

【解决方案2】：

这是由于 CSS 属性 white-space，在默认的 ui-select 样式表中设置为 nowrap。

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

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

这将改变页面上所有 ui-select 的行为。如果你只想改变一个，你可以将它包装在一个 div 中：

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

并更改您的 CSS 选择器

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

我已经 fork 你的 plunkr 来显示结果 http://plnkr.co/edit/IplCxLbnPoIW4TJx1HIx?p=preview

【讨论】：

【解决方案3】：

在看这个时，它似乎不适用于引导样式（这是最初的问题？）似乎使用引导它适用于下拉菜单，但不适用于生成的框（它溢出的地方。）

这个分叉的 plunkr 演示：

http://plnkr.co/edit/fMMSKuPMZwjgVCfV4n6d?p=preview

注意：我改变了这个：

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

【讨论】：