I have following ng-repeat

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text"></div>
</div> 

where item.text is multi-line HTML text and it displays correctly, but I need to truncate it to max-height of item-post div (250px). And then append three dots signalizing that text is longer.

I wanted to use jquery.autoellipsis which is working for example on div with static content.

For AngularJS I have found angular-ellipsis, but is doesn't work with HTML, only plain text. I need to achieve it on HTML content.

Thanks in advance for help!

EDIT/SOLUTION:

Finally I have been able to use jquery.autoellipsis plugin using custom directive (based on asgoth's answer):

myDirectives.directive('htmlEllipsis', ['$timeout', function($timeout) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                $timeout(function() {
                    angular.element(element).ellipsis();
                }, 0);

            }
        };
    }]);

And in partial view:

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text" html-ellipsis></div>
</div> 

EDIT2:

Directive from asgoth's answer after his edit works well, using another approach than above-mentioned directive.

I have following ng-repeat

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text"></div>
</div> 

where item.text is multi-line HTML text and it displays correctly, but I need to truncate it to max-height of item-post div (250px). And then append three dots signalizing that text is longer.

I wanted to use jquery.autoellipsis which is working for example on div with static content.

For AngularJS I have found angular-ellipsis, but is doesn't work with HTML, only plain text. I need to achieve it on HTML content.

Thanks in advance for help!

EDIT/SOLUTION:

Finally I have been able to use jquery.autoellipsis plugin using custom directive (based on asgoth's answer):

myDirectives.directive('htmlEllipsis', ['$timeout', function($timeout) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                $timeout(function() {
                    angular.element(element).ellipsis();
                }, 0);

            }
        };
    }]);

And in partial view:

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text" html-ellipsis></div>
</div> 

EDIT2:

Directive from asgoth's answer after his edit works well, using another approach than above-mentioned directive.

• javascript
• html
• angularjs
• truncate
• ellipsis

2 Answers 2

If I were you I would make a directive to use the jquery plugin (jquery.autoellipsis):

angular.module('myModule').directive('ellipsis', [function () {
    return {
        required: 'ngBindHtml',
        restrict: 'A',
        priority: 100,
        link: function ($scope, element, attrs, ctrl) {
            $scope.hasEllipsis = false;
            $scope.$watch(element.html(), function(value) {
               if (!$scope.hasEllipsis) {
                   // apply ellipsis only one
                   $scope.hasEllipsis = true;
                   element.ellipsis();
               }
            });
        }
    };
}]);

Your html is then:

<div class="item-content" ng-bind-html="item.text" ellipsis></div>

Of course, you need to include the jquery plugin in a script tag.

EDIT: I've edited the answer, so the directive will watch for the html to change (done by ngBindHtml).

Similar to the accepted answer, this alternative allows improved customization: https://github./dibari/angular-ellipsis