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

时间：2016-01-25 18:49:09

标签： javascript angular-material

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

我在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) {
});

4 个答案:

答案 0 :(得分：2)

制作filter。

  

$过滤

           

在HTML模板绑定中

     

{{ filter_expression | filter : expression : comparator}}

     

在JavaScript中

     

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

           

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

截图：

ss

演示：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;
    }

  };
});

答案 1 :(得分：1)

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

md-option {
  text-overflow: ellipsis;
}

答案 2 :(得分：1)

This worked for me just by using CSS

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

答案 3 :(得分：0)

https://github.com/angular/material/issues/6312已经证明了一个错误 此处还描述了一种适用于我的解决方法，即以下CSS：

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

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

相关问题
最新问题