限制字符并在 Angular js 和 ionic 之后有三个点

Posted 2023-02-27

【中文标题】限制字符并在 Angular js 和 ionic 之后有三个点

【英文标题】：Limit characters and have three dots after in angular js and ionic

【发布时间】：2015-10-29 19:00:36

【问题描述】：

我正在使用 AngularJS 和 Ionic，我正在使用 ng-bind-html 从 rest API 中提取数据。我想限制字符的数量，但还要在字符后面加上三个点，以向用户显示还有更多要阅读的内容...

到目前为止我有：

<p ng-bind-html="item.excerpt | limitTo: 100"></p>

但这只是限制字符并将它们切断。

【问题讨论】：

这个问题已经被回答 [there][1] [1]: ***.com/questions/18095727/…

没有一个方法描述了 ng-bind-html 的工作循环

【参考方案1】：

对于纯角度方法，您可以执行以下操作：

(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')

【讨论】：

感谢您的帮助。正是我需要的。

在新的 Angular 版本中，有 'slice' 管道而不是 'limitTo' 管道：angular.io/api/common/SlicePipe

【参考方案2】：

老实说，您的问题似乎更面向 css

您可以截断文本，并使用“省略号”添加点 (...)

例如，如果你在 html 里面有类似的东西：

<p class='ellipsis'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur<p>

然后你在 css 上添加这样的东西：

.ellipsis 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


p.block 
    width: 300px;

结果类似于：

<p class='ellipsis'>Lorem ipsum dolor sit amet ...</p>

如果你想实现一个按钮“阅读更多”，点击时，只需删除“省略号”类，所有文本都会显示出来。

那里有更多信息： Ellipsis info

【参考方案3】：

在我的项目中，我想出了这个过滤器：

angular.module('yourModule').filter('limitToDots', function($filter) 
    return function(input, limit, begin, dots) 
        if (!input || input.length <= limit) 
            return input;
        

        begin = begin || 0;
        dots = dots || '...';

        return $filter('limitTo')(input, limit, begin) + dots;
    ;
);

用法：

<span> text | limitToDots : 50 </span>
<span ng-bind="text | limitToDots : 50"></span>
<span ng-bind-html="text | limitToDots : 50"></span>

【参考方案4】：

如果您使用的旧离子版本在绑定时没有“limitTo:”就像 @c0r3yz 的回答一样，请在您的 html 中尝试此操作

 item.excerpt.length > 100 ? item.excerpt.substring(0,100)+"..." : item.excerpt 

【参考方案5】：

用https://github.com/sparkalow/angular-truncate 修复了这个问题。真正简单易用，可以和ng-bind-html一起使用

【参考方案6】：

Bootstrap 中的文本截断类为我完成了这项工作。

注意：容器应该有一个固定的宽度或列比例才能工作

参考： https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow