在html中，它与angular自身提供的limitTo过滤器一起使用，如下所示:

    <p> {{limitTo:30 | keepDots }} </p>

filter keepDots:

     App.filter('keepDots' , keepDots)

       function keepDots() {

        return function(input,scope) {
            if(!input) return;

             if(input.length > 20)
                return input+'...';
            else
                return input;

        }


    }

我也遇到过类似的问题，我是这样做的:

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}

我创建了这个指令，很容易做到这一点，截断字符串到指定的限制，并添加了一个“显示更多/更少”切换。你可以在GitHub上找到它:https://github.com/doukasd/AngularJS-Components

它可以这样使用:

<p data-dd-collapse-text="100">{{veryLongText}}</p>

下面是指令:

// a directive to auto-collapse long text
app.directive('ddCollapseText', ['$compile', function($compile) {
return {
    restrict: 'A',
    replace: true,
    link: function(scope, element, attrs) {

        // start collapsed
        scope.collapsed = false;

        // create the function to toggle the collapse
        scope.toggle = function() {
            scope.collapsed = !scope.collapsed;
        };

        // get the value of the dd-collapse-text attribute
        attrs.$observe('ddCollapseText', function(maxLength) {
            // get the contents of the element
            var text = element.text();

            if (text.length > maxLength) {
                // split the text in two parts, the first always showing
                var firstPart = String(text).substring(0, maxLength);
                var secondPart = String(text).substring(maxLength, text.length);

                // create some new html elements to hold the separate info
                var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope);
                var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope);

                // remove the current contents of the element
                // and add the new ones we created
                element.empty();
                element.append(firstSpan);
                element.append(secondSpan);
                element.append(moreIndicatorSpan);
                element.append(toggleButton);
            }
        });
    }
};
}]);

和一些CSS去它:

.collapse-text-toggle {
font-size: 0.9em;
color: #666666;
cursor: pointer;
}
.collapse-text-toggle:hover {
color: #222222;
}
.collapse-text-toggle:before {
content: '\00a0(';
}
.collapse-text-toggle:after {
content: ')';
}

我将使用以下三元操作符替代来完成截断…遵循:

<div>{{ modal.title.length > 20 ? (modal.title | limitTo : 20) + '...' : modal.title }}</div>

我知道这有点晚了，但在angularjs的最新版本(我使用的是1.2.16)中，limitTo过滤器支持字符串和数组，所以你可以像这样限制字符串的长度:

{{ "My String Is Too Long" | limitTo: 9 }}

它将输出:

My String

这里是简单的一行修复没有css。

{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}