Question

我有一个这样的字符串：

<a href="#" ng-bind="::MyString | limitTo:40"></a>

但我需要在字符串之后添加三个点，长度超过40，我该怎么办？

Answer 1

如评论所述，您应该使用CSS来实现这一目标。这将确保您的数据不会发生变化并保持UI美观。

每个角色也有不同的宽度。最好检查总宽度而不是字符长度。

＆＃13;

.limit {
  width: 200px;
  text-overflow: ellipsis;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
}

＆＃13;

<input type="text" class="limit">

<div class="ellipsis">
  <a href="#">This is a test for ellipsis using CSS</a>
</div>

＆＃13;

Answer 2

这是用ES6编写的，但是这个过滤器可以让你做你需要的事情：

import * as _ from 'lodash';
/* @ngInject */
export default () => (input, length) =>
  _.size(input) > length ?
  `${input.slice(0, length)}...` : input;

然后您可以将其用作过滤器：

<span data-ng-bind="foo | ellipsis-filter: 20">

将其限制为20个字符，为您添加省略号。

Answer 3

如果你想在模板中解决它而不自己创建过滤器，你可以这样做：

<a href="#" ng-bind="(MyString | limitTo:40) + (MyString.length > 40 ? '...' : '')"></a>

不像创建自己的过滤器那样花哨，但应该这样做。

为ngbind添加三个点

3 个答案: