javascript 限制字符并在 angular js 和 ionic 之后有三个点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31858986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Limit characters and have three dots after in angular js and ionic
提问by Sole
I'm working with AngularJS and Ionic, I'm using the ng-bind-html to pull data from a rest API. I want to limit the amount of characters but also have three dots after the characters to show the user there is more to read...
我正在使用 AngularJS 和 Ionic，我正在使用 ng-bind-html 从其余 API 中提取数据。我想限制字符的数量，但在字符后还有三个点，以向用户显示还有更多内容要阅读...
So far I have:
到目前为止，我有：
<p ng-bind-html="item.excerpt | limitTo: 100"></p>
But this just limits the characters and cuts them off.
但这只会限制字符并将它们切断。
采纳答案by Sole
Fixed this with the https://github.com/sparkalow/angular-truncate. Real simple and easy to use and it can be used with ng-bind-html
使用https://github.com/sparkalow/angular-truncate修复了这个问题。真正简单易用，可以与 ng-bind-html 一起使用
回答by c0r3yz
For a pure angular approach, you can do something like this:
对于纯角度方法，您可以执行以下操作：
{{(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')}}
回答by Aethiss
Honestly your question seems more oriented to css
老实说，您的问题似乎更针对 css
You can truncate text, and add dots (...) using "ellipsis"
您可以截断文本，并使用“省略号”添加点 (...)
Example, if you have inside html something like:
例如，如果您在 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>
and you add something like this on css :
然后在 css 上添加类似的内容：
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p.block {
width: 300px;
}
Result is something like :
结果是这样的：
<p class='ellipsis'>Lorem ipsum dolor sit amet ...</p>
If you want implement a button "read more", on click, just remove the 'ellipsis' class, and all text will be displayed.
如果你想实现一个按钮“阅读更多”，点击时，只需删除“省略号”类，所有文本都会显示出来。
More info there : Ellipsis info
更多信息： 省略号信息
回答by Andrey Mischenko
In my project I came up with this filter:
在我的项目中，我想出了这个过滤器：
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;
};
});
Usage:
用法：
<span>{{ text | limitToDots : 50 }}</span>
<span ng-bind="text | limitToDots : 50"></span>
<span ng-bind-html="text | limitToDots : 50"></span>
回答by Yudhistira Bayu
If you're using older ionic version which doesn't have 'limitTo:' on binding
like what @c0r3yz 's answer, try this in your html
如果您使用的是在绑定上没有 'limitTo:' 的旧离子版本，
就像@c0r3yz 的答案一样，请在您的 html 中尝试此操作
{{ item.excerpt.length > 100 ? item.excerpt.substring(0,100)+"..." : item.excerpt }}
回答by PPM1988
Text truncate class in Bootstrap did the job for me.
Bootstrap 中的文本截断类为我完成了这项工作。
Note: The container should have a fixed width or column proportion for this to work
注意：容器应该有固定的宽度或列比例才能工作
Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
参考：https: //getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
