截断 md-select 下拉列表中长项的文本

Question

是否可以在 md-select 语句中截断 selected 项目的文本，使其适合分配的 space？我能得到的唯一行为是始终显示项目 selected 的全文。

我在 codepen 上创建了一个问题示例：http://codepen.io/anon/pen/QymLwr

谢谢！

<html ng-app="playground">
  <head>
    <script src="//code.angularjs.org/1.4.8/angular.js"></script>
    <script src="//code.angularjs.org/1.4.8/angular-animate.js"></script>
    <script src="//code.angularjs.org/1.4.8/angular-aria.js"></script>
    <script src="//code.angularjs.org/1.4.8/angular-messages.js"></script>
    <script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
    <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css"></link>
  </head>
  <body layout-align="center center" layout="column" ng-app="demoApp" ng-controller="AppCtrl">
    <md-select ng-model="name"  style="width: 200px;" placeholder="Choose">
      <md-option>This is a very long text that when selected flows outside of the available space and is not truncated</md-option>
      <md-option>Option 2</md-option>
      <md-option>Option 3</md-option>
    </md-select>
  </body>
</html>


angular.module('playground', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
});

Answer 1

您可以在 CSS 中执行此操作。

md-option {
  text-overflow: ellipsis;
}

Answer 2

制作filter.

$filter

In HTML Template Binding

{{ filter_expression | filter : expression : comparator}}

In JavaScript

$filter('filter')(array, expression, comparator)

via: https://docs.angularjs.org/api/ng/filter/filter

截图：

演示：http://codepen.io/anon/pen/gPeMpd?editors=1010

过滤器设置为 `15` 个字符的标记：

<md-option>{{myLongString | truncate:15}}</md-option>

`truncate` 过滤器：

// Filter below found here: http://jsfiddle.net/tuyyx/

app.filter('truncate', function() {
  return function(text, length, end) {
    if (isNaN(length))
      length = 10;

    if (end === undefined)
      end = "...";

    if (text.length <= length || text.length - end.length <= length) {
      return text;
    } else {
      return String(text).substring(0, length - end.length) + end;
    }

  };
});

Answer 3

这显然是一个错误，已在 https://github.com/angular/material/issues/6312 中演示那里还描述了一种对我很有效的解决方法，即以下 CSS：

.md-select-value *:first-child { 
  width: calc(100% - 24px); 
}

有关更新的代码笔，请参阅 http://codepen.io/anon/pen/GodRXP。

Answer 4

这对我有用 CSS

.customTruncatedText {
    overflow: hidden;
    text-overflow: ellipsis;
}

截断 md-select 下拉列表中长项的文本

Truncate the text for long items in an md-select drop-down

javascript

angular-material

$filter

截图：

演示：http://codepen.io/anon/pen/gPeMpd?editors=1010

过滤器设置为 `15` 个字符的标记：

`truncate` 过滤器：

截断 md-select 下拉列表中长项的文本

Truncate the text for long items in an md-select drop-down

javascript

angular-material

$filter

截图：

演示：http://codepen.io/anon/pen/gPeMpd?editors=1010

过滤器设置为 15 个字符的标记：

truncate 过滤器：

过滤器设置为 `15` 个字符的标记：

`truncate` 过滤器：