基于div宽度的动态文本长度限制

Question

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 || ' …');
        };
});

Answer 1

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 comments 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