I am having a div which will be having dynamic width, based on the width I have to restrict the content within that div,I have created a filter which will cut the text and append "..." to the end of the string, but the issue is how we can assign the limit based on the dynamic width size

my code is as given below

JSFiddle

html

<div ng-app="app" ng-controller="MainCtrl">
    <div class="test" ng-style="myStyle">{{value  | splice:12:' ...'}}</div>
</div>

script

angular.module('app', [])
    .controller('MainCtrl', function ($scope) {
        $scope.myStyle={};
        $scope.myStyle.width = "150px";
        $scope.value= "My value is anythinggggggggggggggggg";
})

.filter('splice', function () {
        return function (value, max, tail) {
            if (!value) return '';
            max = parseInt(max, 10);
            if (!max) return value;
            if (value.length <= max) return value;
            value = value.substr(0, max);
            return value + (tail || ' …');
        };
});

I am having a div which will be having dynamic width, based on the width I have to restrict the content within that div,I have created a filter which will cut the text and append "..." to the end of the string, but the issue is how we can assign the limit based on the dynamic width size

my code is as given below

JSFiddle

html

<div ng-app="app" ng-controller="MainCtrl">
    <div class="test" ng-style="myStyle">{{value  | splice:12:' ...'}}</div>
</div>

script

angular.module('app', [])
    .controller('MainCtrl', function ($scope) {
        $scope.myStyle={};
        $scope.myStyle.width = "150px";
        $scope.value= "My value is anythinggggggggggggggggg";
})

.filter('splice', function () {
        return function (value, max, tail) {
            if (!value) return '';
            max = parseInt(max, 10);
            if (!max) return value;
            if (value.length <= max) return value;
            value = value.substr(0, max);
            return value + (tail || ' …');
        };
});

• javascript
• html
• angularjs

Share Improve this question Follow edited Apr 4, 2015 at 7:44 Alex Man asked Apr 4, 2015 at 7:30 Alex ManAlex Man 4,8861919 gold badges105105 silver badges188188 bronze badges 1

• Check this jsfiddle/mohamedrias/pgc4pqn2, see if it satisfies your need – mohamedrias Commented Apr 4, 2015 at 8:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I've tried with a different appraoch for your problem. See if it helps:

Instead of passing the limit to the filter, am passing the width of the element.

<div class="test" ng-style="myStyle">{{value  | splice:myStyle.width:' ...'}}</div>

Now inside your filter:

       function (value, max, tail) {
            if(isNaN(max))
                max = parseInt(max.slice(0,-2),10)/12;
            if (!value) return '';
            max = parseInt(max, 10);
            // rest of your code  

Am checking if it's a string. In case its a string, assuming you're passing width in format of 150px. So slicing the px from the string. we've 150 now.

Now taking the least font size of 8 and dividing it by 8. So now the limit will be based on the width of the element.

You can reuse the same filter by passing the width as well as passing the limit directly. It will suit for both the scenarios now.

DEMO

Updated Answer

I've been looking at different solutions. As you've mentioned in ments that the font-size may vary. I guess better we go with simple CSS based approach in that case using text-overflow.

.test {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Now whatever may be the font-size, the text will always be clipped. Now in whichever elements you want to have this feature, add specific css class clip-text.

DEMO