添加三个点到ngbind

Add three dots to ngbind

本文关键字：ngbind 三个 添加      更新时间：2023-09-26

我有一个这样的字符串:

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

但是我需要在长度超过40的字符串后添加三个点，我该怎么做?

如前所述，您应该使用CSS来实现这一点。这将确保您的数据不被更改，并保持UI美观。

每个字符都有不同的宽度。最好检查字符的总宽度，而不是长度。

.limit {
  width: 200px;
  text-overflow: ellipsis;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
}
<input type="text" class="limit">
<div class="ellipsis">
  <a href="#">This is a test for ellipsis using CSS</a>
</div>

这是用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个字符，为您添加省略号

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

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

没有创建自己的过滤器那么花哨，但应该可以达到目的。

相关文章：